Moving a div from one to another while scrolling a page

Question

Moving a div from one to another while scrolling a page

I saw several similar to what I'm looking for, but not quite the same.

So, I'm trying to move elements from one parent div to another, but only after the user scrolls a certain amount down the page. Thus, as soon as the user reaches a point on the page, the elements will switch to another and then disappear at the very top of the page.

So far, I managed to create a div element and get it to appear at the top of the page, but only after the user scrolled to 600. What I need to do now is when this element will move another div the elements will appear on it On the page. Not sure if I explain it very well or not!

So, if you look at the code below, what I want to do now is move the entire div class “Test” to move inside the “Top” element after the user scrolls, and this appears. And then, if the user scrolls again, the "Top" element disappears, and the "Test" div returns to it in its usual 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>

Run code Hide result

+4

javascript jquery

wardy118 Jan 9 '18 at 12:24

source share

2 answers

Ivan86 · Answer 1 · 2018-01-09T13:07:36+0000

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

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

Here is the code:

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

Hide result

Bhuwan · Answer 2 · 2018-01-09T13:57:29+0000

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>

Hide result

Moving a div from one to another while scrolling a page

More articles: