스크롤 할 때 jquery를 사용하여 div를 텔레포트하기

Question

jQuery를 사용하여 스크롤 할 때 div를 DOM의 다른 부분으로 "텔레포트"할 수 있는지 궁금합니다.

예를 들어, 내가 기사를 가정 해 봅시다 :

제목 subt 자막과 사업부가 포함되는 위치 div area가

Subt 1 
Div area 1 
Content 1 

.

그래서 나는이 결과를 달성하는 데 필요한 : 사용자가 스크롤 될 것입니다 동안

을 사업부는 지역에 따라 점프됩니다

 **-- If I scroll from here --** 

Subt 1 
     Div area 1 
     Content 1 



     Subt 2 
     Div area 2 
     Content 2 



     Subt 3 
     Div area 3 
     Content 3 


    **-- To here --** 
     Subt 4 
     Div area 4 -- The div will appear inside of here -- 
     Content 4 

나는 DIV 전혀 표시하지 않는다 한 번에 한 장소에서 다른 장소로 이동하는 스크롤을 따라 할 것입니다. 나는 심지어 구글에서 이것을 어떻게 찾아야할지 모른다. 그래서 나는 묻고있다. 사전

Answer 1

사용할 수 있습니다 방법에

이

들으은 jQuery의 detach (https://api.jquery.com/detach/)

// Detach is to splice from the DOM 
$SwappedElement = $('#HotSwapDiv').detach(); 
// substitute logic to determine div position by window scroll 
$DestinationDivArea = $('#div_identifier) 
// Append (attach to end) of Destination div 
$DestinationDivArea.append($SwappedElement); 

당신은 jQuery를에 다음과 창 스크롤 이벤트를 수신 할 수 있습니다

$(window).scroll(function() { 
    // Get current window scroll amount in pixels 
    iPixelsScrolledFromTop = $(window).scrollTop(); 
    // Get the amount from the top of one of your divs 
    iDivAreaPixelsFromTop = $('#div_identifier').offset().top; 
    // Arbitrary calculation to see if target div is 250 pixels away from scroll 
    if(iPixelsScrolledFromTop > (iDivAreaPixelsFromTop - 250)) 
    :> //Insert swap logic from above 
});