当页面滚动时，将Div元素从一个移动到另一个

I have seen a few similar to what I am looking for but not exactly the same.

我已经见过一些和我正在寻找的相似但不是完全相同的。

So what I am trying to do is move elements from within one parent div to another but only once the user has scrolled a certain amount down the page. So once the user has reached a point on the page the elements will then move to another and then fade in at the very top of the page.

所以我要做的是将元素从一个父div中移动到另一个父div中，但是只有当用户在页面中滚动了一定数量的元素之后。因此，一旦用户到达页面上的一个点，元素就会移动到另一个点，然后在页面的最顶端淡入。

So far I have been able to create the div element and get this to show at the top of the page but only once the user has scrolled down 600. What I now need to do is once this element appears to move other div elements on the page to appear within it. Not sure if I am explaining this very well or not!

到目前为止，我已经能够创建div元素并将其显示在页面的顶部，但只有一次用户滚动了600。我现在需要做的是，一旦这个元素出现，将页面上的其他div元素移到其中。不确定我是否解释得很好!

So if you look at the code below what I want to do now is to move all of the div class "Test" to move within the element of "Top" once the user has scrolled down and this appears. And then if the user scrolls back up again the "Top" element disappears and the "Test" div goes back to it's normal place.

如果你看下面的代码我现在要做的是把所有的div类"Test"移动到"Top"的元素中一旦用户滚动下来，这个就会出现。然后，如果用户再次回滚，“Top”元素就消失了，“Test”div回到了原来的位置。

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 600) {
    $('#Top').fadeIn();
  } else {
    $('#Top').fadeOut();
  }
});

#Top {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 2px solid #f2f2f2;
  border-radius: 0;
  background-color: rgb(255, 255, 255);
  z-index: 9999;
  padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="Top"></div>

<div class="Test">
  <h1 class="heading-title">Title Here</h1>
  <div class="product-price">Price Here</li>
    <div class="cart-container"><button type="button" id="button-cart" class="button">Add to Cart</button></div>
  </div>
</div>

2 个解决方案

#1

You can use the .each() jQuery method to go through all the <div class="Test"> elements and then use .appendTo() to move each of them and all of their contents to some other element.

可以使用.each() jQuery方法遍历所有

元素，然后使用. appendto()将每个元素及其所有内容移动到其他元素。

I also corrected <div class="product-price">Price Here</li> to this <div class="product-price">Price Here</div>.

我还修正了

这里的价格到这个

这里的价格

。

Here is the code:

这是代码:

Note: I purposefully gave the bodya height of 2000px so we can test here (run the snippet).

注意:我故意给了车身2000像素的高度，这样我们就可以在这里进行测试(运行代码片段)。

$(document).scroll(function()
{
  if($(window).width() >= 480)
  {
     var y = $(this).scrollTop();
     var div;
  
     if (y > 600)
     {
       // for each element with class Test
       $('div.Test').each(function()
       {
         $(this).appendTo('#Top'); // move the element and contents to #top
       });
    
       $('#Top').fadeIn();
     } 
     else 
     {
       $('div.Test').each(function()
       {
         $(this).appendTo('body');    // move to body
       });
    
       $('#Top').fadeOut();
     }
  }
});

body
{
  height:2000px;
}

#Top {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 2px solid #f2f2f2;
  border-radius: 0;
  background-color: rgb(255, 255, 255);
  z-index: 9999;
  padding: 15px;
}

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <div id="Top"></div>

  <div class="Test">
    <h1 class="heading-title">Title Here</h1>
    <div class="product-price">Price Here</div>
    <div class="cart-container">
      <input type="button" id="button-cart" class="button" value="Add to Cart" />
    </div>
</div>
</body>

</html>

#2

You can use html() jQuery function like below

可以使用html() jQuery函数，如下所示

if ($(window).width() >= 480) {
  $(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 600) {
      $("#Top").html($('.Test').html());
      $('#Top').fadeIn();
    } else {
      $('#Top').fadeOut();
      $("#Top").html('');
    }
  });
}

#Top {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 2px solid #f2f2f2;
  border-radius: 0;
  background-color: rgb(255, 255, 255);
  z-index: 9999;
  padding: 15px;
}

body {
  height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="Top"></div>

<div class="Test">
  <h1 class="heading-title">Title Here</h1>
  <div class="product-price">Price Here</div>
  <div class="cart-container"><button type="button" id="button-cart" class="button">Add to Cart</button>
  </div>
</div>

#1