基于页面滚动为section内article添加/移除active类的实现咨询

Got it, let's build this behavior where each full-screen section shows its image only when it's the active (viewport-focused) section—just like the experience you're aiming for. Here's a clean, performant implementation:

1. HTML Structure #

First, set up your full-screen sections, each containing an article wrapper for the image. We'll use the active class to control visibility later:

<section class="full-screen-section">
  <article>
    <img src="your-image-1.jpg" alt="Section 1 content">
  </article>
</section>
<section class="full-screen-section">
  <article>
    <img src="your-image-2.jpg" alt="Section 2 content">
  </article>
</section>
<section class="full-screen-section">
  <article>
    <img src="your-image-3.jpg" alt="Section 3 content">
  </article>
</section>

2. CSS Styling #

Make each section fill the entire viewport, hide articles by default, and add a smooth transition for the active state:

/* Reset default margins/paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Full-screen section setup */
.full-screen-section {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Hide article content by default */
.full-screen-section article {
  opacity: 0;
  transition: opacity 0.6s ease;
  width: 100%;
  height: 100%;
}

/* Show content when section is active */
.full-screen-section article.active {
  opacity: 1;
}

/* Optional: Style images to fit the section perfectly */
.full-screen-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. JavaScript Logic #

We need to listen for scroll events, determine which section is currently centered in the viewport, and toggle the active class. I've added a debounce function to optimize performance (scroll events fire way too often otherwise!):

// Debounce function to limit how often we run our update logic
function debounce(func, delay = 100) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// Grab all our full-screen sections
const sections = document.querySelectorAll('.full-screen-section');
const viewportHeight = window.innerHeight;

// Function to check and update the active section
function updateActiveSection() {
  sections.forEach(section => {
    const article = section.querySelector('article');
    const rect = section.getBoundingClientRect();
    
    // Check if the section is in the "active" viewport zone (middle 50%)
    const isActive = rect.top <= viewportHeight / 2 && rect.bottom >= viewportHeight / 2;
    
    if (isActive) {
      article.classList.add('active');
    } else {
      article.classList.remove('active');
    }
  });
}

// Run an initial check when the page loads
updateActiveSection();

// Listen for scroll events with our debounced function
window.addEventListener('scroll', debounce(updateActiveSection));

Key Notes: #

• The debounce function ensures we don't overload the browser with constant updates during scrolling, keeping the experience smooth.
• The active check uses the viewport's midpoint (viewportHeight / 2) to trigger the active class—tweak this value if you want the image to appear earlier or later as you scroll through a section.
• The CSS transition adds a subtle fade-in/out effect, matching the polished feel of the example you referenced.

Test this out by scrolling up and down—you'll notice that only the section currently occupying the main viewport has its image visible, and the active class is added/removed automatically as you move past sections.

内容的提问来源于stack exchange，提问作者Olcay E.