如何实现div在父容器内滚动时固定于指定div下方？sticky定位失效与无动画元素切换问题解决

Alright, let's tackle your sticky positioning issues and desired card-internal scrolling setup step by step.

1. Why top:30 breaks sticky positioning #

The immediate problem here is missing CSS units. In CSS, length values like top require a unit (e.g., px, em) to be valid. Writing top:30 instead of top:30px makes the browser ignore the property entirely, which is why your sticky positioning stops working. Fixing this is as simple as adding the unit:

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 30px; /* Added px unit */
  padding: 50px;
  font-size: 20px;
  background-color: yellow;
}

2. Implementing card-internal scrolling + fixed h2 + sticky elements below h2 #

To restrict scrolling to the blue-green .article card, keep the h2 fixed inside the card (not the page top), and have sticky elements lock below the h2, follow these adjustments:

Key Changes:

• Turn .article into a self-contained scroll container by setting a fixed/max height and overflow-y: auto
• Make the h2 sticky relative to the card (not the page) with position: sticky and top: 0
• Adjust the sticky elements' top value to match the h2's total height (including padding) so they lock right below it

Here's the full working code:

body {
  margin: 0;
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
}

/* Card container: now a scrollable area */
div.article {
  background: #ccffee;
  padding: 0 30px; /* Remove vertical padding to avoid gaps around sticky h2 */
  max-height: 500px; /* Set a height to trigger internal scrolling */
  overflow-y: auto;
}

/* H2 fixed inside the card */
div.article h2 {
  position: sticky;
  top: 0;
  background: #ccffee; /* Match card background to prevent content bleed-through */
  margin: 0;
  padding: 30px 0; /* Restore vertical padding for spacing */
}

/* Sticky elements locked below the h2 */
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 60px; /* Matches h2's total height (30px padding top + 30px padding bottom) */
  padding: 50px;
  font-size: 20px;
  background-color: yellow;
  margin: 10px 0;
}

div.sticky.two {
  background-color: #e8e8e8;
}

.content {
  height: 1000px; /* Long content to test scrolling */
  background: #ffc0cb;
  margin: 10px 0;
}

<h1>Web Title</h1>
<div class="article">
  <h2>Title</h2>
  <div class="sticky one">Sticky Stack 1</div>
  <div class="sticky two">Sticky Stack 2</div>
  <div class="content">Scroll down inside the card to test the behavior!<br><br>More content...<br>More content...<br>More content...</div>
</div>

3. No-animation sticky swap (instant show/hide) #

Pure CSS can't achieve an instant swap of sticky elements without transition effects, but we can use JavaScript to listen for scroll events and toggle visibility directly:

Steps:

1. Add a CSS class to hide elements instantly
2. Listen to the card's scroll event
3. Toggle visibility when the scroll position passes the first sticky element's bottom edge

Add this CSS and JavaScript to your setup:

/* Add this to your styles */
.hidden {
  display: none !important;
}

const article = document.querySelector('.article');
const stickyOne = document.querySelector('.sticky.one');
const stickyTwo = document.querySelector('.sticky.two');

// Calculate the scroll position where we need to swap elements
const swapTriggerPosition = stickyOne.offsetTop + stickyOne.offsetHeight;

// Initialize state: show first sticky, hide second
stickyTwo.classList.add('hidden');

// Listen for scroll events inside the card
article.addEventListener('scroll', () => {
  const currentScrollTop = article.scrollTop;
  
  // Swap elements when we scroll past the first sticky's bottom
  if (currentScrollTop >= swapTriggerPosition) {
    stickyOne.classList.add('hidden');
    stickyTwo.classList.remove('hidden');
  } else {
    stickyOne.classList.remove('hidden');
    stickyTwo.classList.add('hidden');
  }
});

This will make .sticky.one disappear instantly and .sticky.two appear as soon as you scroll past the first element's bottom edge. Scrolling back up will reverse the change immediately, no transitions or partial visibility.

内容的提问来源于stack exchange，提问作者Dhana D.