Move Div element from one to another when page scrolled
Question
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.
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!
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.
$(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 answers
solution1
4 ACCPTED 2018-01-09 13:07:36
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.
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 body a height of 2000px so we can test here (run the snippet).
$(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>
solution2
2 2018-01-09 13:57:29
You can use html() jQuery function like below
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.