Question

我已经看到了一些与我正在寻找的相似但不完全相同的东西。

所以我想要做的是将元素从一个父div中移动到另一个父div，但只有在用户向下滚动一定量的页面后才会移动元素。因此，一旦用户到达页面上的某个点，元素将移动到另一个点，然后在页面的最顶部淡入。

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

因此，如果你看下面的代码，我现在要做的就是移动所有div类＆＃34;测试＆＃34;在＆＃34; Top＆＃34;的元素内移动一旦用户向下滚动，就会出现这种情况。然后，如果用户再次向上滚动＆＃34; Top＆＃34;元素消失，＆＃34;测试＆＃34; div回到了它的正常位置。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用.each() jQuery方法浏览所有<div class="Test">元素，然后使用.appendTo()将其中的每一个及其所有内容移至其他内容元件。

我还将<div class="product-price">Price Here</li>更正为此<div class="product-price">Price Here</div>。

以下是代码：

注意：我故意将body的高度设为2000px，以便我们可以在这里进行测试（运行代码段）。

＆＃13;

$(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();
     }
  }
});

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

您可以使用 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>

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

2 个答案: