Fullpage.js 技术需求：第2至第6区块滚动时图片固定显示

Hey there! I’ve tackled this exact scenario with Fullpage.js before, so let’s get that image sticking around from section 2 all the way until we finish scrolling past section 6. Here’s how to make it work:

Core Concept #

The main issue is that Fullpage.js hides inactive sections by default—so any element inside a section will disappear along with it. Instead, we’ll pull the image out of the section, place it in a global container, and use Fullpage’s built-in callbacks to control when it shows or hides.

Step 1: Tweak Your HTML Structure #

Move the image outside of your section elements (but keep it within your page’s main layout) so it’s not tied to any single section’s visibility:

<div id="fullpage">
  <div class="section">Section 1 Content</div>
  <div class="section">Section 2 Content</div>
  <div class="section">Section 3 Content</div>
  <div class="section">Section 4 Content</div>
  <div class="section">Section 5 Content</div>
  <div class="section">Section 6 Content</div>
</div>

<!-- Your persistent image lives here -->
<div class="persistent-image">
  <img src="your-image-url.jpg" alt="Sticky Image">
</div>

Step 2: Style the Image Container #

Use CSS to fix the image’s position on the page, ensure it sits above section content, and add a smooth transition for show/hide effects:

.persistent-image {
  position: fixed;
  /* Adjust these values to place your image where you want */
  top: 20px;
  right: 20px;
  z-index: 999; /* Critical to stay above Fullpage sections */
  opacity: 0;
  transition: opacity 0.3s ease-in-out; /* Smooth fade effect */
}

/* Class to toggle the image visible */
.persistent-image.active {
  opacity: 1;
}

Step 3: Use Fullpage.js Callbacks to Control Visibility #

Fullpage has two key callbacks we’ll leverage: afterLoad (triggers when a section finishes loading) and onLeave (triggers when we start scrolling away from a section). We’ll toggle the active class based on which section we’re viewing:

new fullpage('#fullpage', {
  // Add your existing Fullpage config here (anchors, navigation, etc.)
  
  afterLoad: function(origin, destination, direction) {
    // Show the image when we land on section 2 through 6
    // Note: Fullpage section indexes start at 0 (section 1 = index 0, section 2 = index 1)
    if (destination.index >= 1 && destination.index <= 5) {
      document.querySelector('.persistent-image').classList.add('active');
    }
  },
  
  onLeave: function(origin, destination, direction) {
    // Hide the image if we scroll UP from section 2 to section 1
    if (origin.index === 1 && direction === 'up') {
      document.querySelector('.persistent-image').classList.remove('active');
    }
    // Hide the image if we scroll DOWN from section 6 to beyond it
    if (origin.index === 5 && direction === 'down') {
      document.querySelector('.persistent-image').classList.remove('active');
    }
  }
});

Quick Tips #

• Double-check your section indexes: Fullpage counts sections starting at 0, so section 2 is index 1, section 6 is index 5.
• Adjust the CSS positioning (top, right, etc.) to place the image exactly where you need it on the page.
• If you’re using jQuery, you can replace document.querySelector with $('.persistent-image') for shorter syntax.

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