fullpage.js环境下滚动触发元素固定/类切换功能失效问题咨询

Hey there! I totally get why your original fixed-div approach didn’t work—fullpage.js doesn’t use the browser’s native scrollbar at all. Instead, it handles page transitions via CSS transforms, so traditional scroll event listeners won’t fire like you’d expect. But don’t worry, we can use fullpage’s built-in callbacks to achieve exactly what you want: toggling a class when entering the #secondPage section.

Here’s a step-by-step solution: #

1. Update Your HTML Structure

Make sure your target section has the correct ID, and the element you want to modify is in place:

<div id="fullpage">
  <div class="section" id="firstPage">
    <!-- Content of first section -->
  </div>
  <div class="section" id="secondPage">
    <!-- Element you want to apply the class to (could be inside this section or a global element) -->
    <div class="target-element">I'll get a class when you enter this section!</div>
  </div>
  <div class="section" id="thirdPage">
    <!-- Content of third section -->
  </div>
</div>

2. Define Your CSS Class

Create the class you want to toggle—for example, a fixed-top style:

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: white;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

3. Use fullpage.js Callbacks to Toggle the Class

Fullpage has dedicated callbacks for section transitions. We’ll use afterLoad (triggers when a section finishes loading) and onLeave (triggers when leaving a section) to add/remove the class:

new fullpage('#fullpage', {
  // Your existing fullpage config here
  navigation: true,
  anchors: ['firstPage', 'secondPage', 'thirdPage'],
  
  // Callback when a section is loaded
  afterLoad: function(origin, destination, direction) {
    // Check if we just entered #secondPage
    if (destination.anchor === 'secondPage') {
      document.querySelector('.target-element').classList.add('fixed-top');
    }
  },
  
  // Callback when leaving a section
  onLeave: function(origin, destination, direction) {
    // Check if we're leaving #secondPage
    if (origin.anchor === 'secondPage') {
      document.querySelector('.target-element').classList.remove('fixed-top');
    }
  }
});

Key Notes: #

• If your target element is a global header (not inside #secondPage), this still works—just make sure your selector targets the right element.
• For fullpage.js v2 users, the callback parameters are slightly different (use anchorLink instead of destination.anchor). Adjust the code like this:

  afterLoad: function(anchorLink, index) {
    if (anchorLink === 'secondPage') {
      // Add class
    }
  }
  

• Double-check that your section’s anchor matches the ID (fullpage uses anchors for section identification, so keeping them consistent avoids bugs).

This approach leverages fullpage’s native behavior, so it’ll work reliably without fighting against the library’s scroll mechanism.

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