如何实现Div仅在父Section内固定：滚动至下一个Section时取消固定并吸附至当前Section底部

Got it, let’s work through this problem exactly how you need it. Since position:sticky isn’t reliable for your use case, we’ll combine Intersection Observer (to detect when your target div enters the viewport) with a scroll event listener (to track when the next section hits the fixed div). Here’s a step-by-step implementation:

Core Concept #

1. Start with the target div positioned absolutely at the bottom of its parent section.
2. When the div enters the viewport, switch it to position:fixed so it stays at the top of the viewport as the user scrolls.
3. When the next section scrolls up to meet the fixed div, switch it back to absolute positioning so it sticks to the bottom of its parent section.
4. Handle upward scrolling to revert the fixed behavior if the user scrolls back into the parent section.

Full Code Implementation #

HTML #

<!-- Parent section with the target div -->
<section class="section parent-section">
  <div class="section-content">
    <p>Scroll down until the gray box enters the viewport...</p>
    <!-- Add enough filler content to push the target div below the fold initially -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="sticky-target">I'll fix to the top, then stick to the bottom!</div>
</section>

<!-- Next section that triggers the behavior change -->
<section class="section next-section">
  <h2>Next Section</h2>
  <p>When you scroll to here, the gray box will stick to the bottom of the previous section.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>

CSS #

/* Base section styling */
.section {
  min-height: 100vh;
  padding: 2rem;
  border-bottom: 1px solid #eee;
  position: relative; /* Required for absolute positioning of child div */
}

/* Target div default state: stuck to parent section bottom */
.sticky-target {
  padding: 1.5rem;
  background: #444;
  color: white;
  position: absolute;
  bottom: 0;
  left: 2rem;
  right: 2rem;
  transition: all 0.2s ease; /* Smooth transition between states */
}

/* Fixed state: sticks to viewport top */
.sticky-target.fixed {
  position: fixed;
  top: 0;
  bottom: auto;
  left: 2rem;
  right: 2rem;
}

JavaScript #

const stickyTarget = document.querySelector('.sticky-target');
const parentSection = document.querySelector('.parent-section');
const nextSection = document.querySelector('.next-section');

// 1. Detect when the target div enters the viewport to activate fixed positioning
const targetObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      stickyTarget.classList.add('fixed');
    } else {
      // If scrolling up past the parent section, disable fixed
      const parentRect = parentSection.getBoundingClientRect();
      if (parentRect.bottom < window.innerHeight) {
        stickyTarget.classList.remove('fixed');
      }
    }
  });
}, { threshold: 0.1 }); // Trigger when 10% of the div is visible

targetObserver.observe(stickyTarget);

// 2. Track scroll position to disable fixed when next section hits the target
window.addEventListener('scroll', () => {
  const nextSectionTop = nextSection.getBoundingClientRect().top;
  const stickyTargetTop = stickyTarget.getBoundingClientRect().top;

  // When next section reaches the top of the fixed div, revert to absolute positioning
  if (nextSectionTop <= stickyTargetTop) {
    stickyTarget.classList.remove('fixed');
  } 
  // When scrolling back up, re-enable fixed if we're still in the parent section
  else if (parentSection.getBoundingClientRect().bottom > window.innerHeight && stickyTargetTop <= 0) {
    stickyTarget.classList.add('fixed');
  }
});

Key Details to Adjust #

• Threshold Value: Modify the threshold in the Intersection Observer to control how much of the div needs to be visible before triggering fixed positioning.
• Positioning Values: Adjust left, right, and top in the .fixed class to match your layout’s padding/margins.
• Transition: The transition property in .sticky-target smooths the switch between fixed and absolute states—remove it if you don’t want animation.

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