页面滚动时将Div元素从一个父容器移至另一个的实现需求

Got it, let's fix this up for you! You're already halfway there with the fade in/out functionality for the #Top div. Now we just need to add logic to move your .Test elements into #Top when scrolling down, and move them back to their original parent containers when scrolling up.

Key Things to Handle: #

• Track where each .Test element originally lives so we can put them back correctly
• Avoid repeating the move/restore operations every time the scroll event fires (this prevents unnecessary DOM manipulation)

Modified Code #

HTML (Fixed a Closing Tag Issue)

First, I noticed a small typo in your original HTML—you had a </li> closing a <div> element. Here's the corrected version:

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

CSS (No Changes Needed)

Your existing CSS for #Top works perfectly for the fixed top bar:

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

JavaScript (Added Move/Restore Logic)

Here's the updated script that handles both the fade effects and element movement:

$(document).ready(function() {
  // Cache our elements for better performance
  const $testElements = $('.Test');
  const $topContainer = $('#Top');
  
  // Variables to track state and original parent containers
  let originalParents = [];
  let elementsMoved = false;

  $(document).scroll(function() {
    const scrollPosition = $(this).scrollTop();

    if (scrollPosition > 600) {
      $topContainer.fadeIn();
      
      // Only move elements if they haven't been moved yet
      if (!elementsMoved) {
        // Save each element's original parent
        $testElements.each(function(index) {
          originalParents[index] = $(this).parent();
          // Move the element into the Top container
          $topContainer.append($(this));
        });
        elementsMoved = true;
      }
    } else {
      $topContainer.fadeOut();
      
      // Only restore elements if they were moved
      if (elementsMoved) {
        // Move each element back to its original parent
        $testElements.each(function(index) {
          originalParents[index].append($(this));
        });
        // Reset state variables
        originalParents = [];
        elementsMoved = false;
      }
    }
  });
});

How It Works: #

• We use elementsMoved as a flag to make sure we only perform the move/restore operations once per scroll threshold crossing (instead of every time the scroll event fires, which happens a lot!)
• originalParents stores the parent element of each .Test item before moving them, so we can place them exactly where they came from when scrolling back up
• Caching elements ($testElements, $topContainer) improves performance by avoiding repeated DOM queries

内容的提问来源于stack exchange，提问作者wardy118