Question

我想知道是否可以在滚动时使用jQuery将div“传送”到DOM的另一部分。

例如，假设我有一篇文章：

标题

Subt 1
Div area 1
Content 1

其中subt是副标题，div area是div的所在位置。

所以我需要实现这个结果：

当用户滚动时，div将从一个区域跳到另一个区域

     **-- 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＆＃39; 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
});

在滚动时使用jquery传送div

1 个答案: