Menu
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>
336
Just add position: fixed; in your div style. I have checked and Its working fine in my code. position: fixed isn't enough when you want your div to move only along with one of the scrolls, X or Y. The accepted answer is perfect.
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
Use position fixed. Position fixed makes it so that an element stays at it's specified place even if the user scrolls up or down.
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 bodya 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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
