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

Question

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

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

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

因此，如果您查看下面的代码，我现在要做的就是在用户向下滚动并显示时，将所有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>

Answer 1

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

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

这是代码：

注意：我故意给body高度2000px所以我们可以在这里测试（运行片段）。

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

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 个解决方案

解决方案1
4 已采纳 2018-01-09 13:07:36

解决方案2
2 2018-01-09 13:57:29

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

问题描述

2 个解决方案

解决方案1 4 已采纳 2018-01-09 13:07:36

解决方案2 2 2018-01-09 13:57:29

解决方案1
4 已采纳 2018-01-09 13:07:36

解决方案2
2 2018-01-09 13:57:29