如何用jQuery实现滚动到指定高度前禁用滚动及头部分段动画效果

Hey there! I’ve worked on similar scroll-controlled header animations before, so let me break down exactly how to build this effect where:

• The page is locked from scrolling until you’ve "scrolled through" all header segments
• Each section of the header animates in sequence as you scroll
• Once all animations are done, regular page scrolling resumes

Core Concept #

We’ll do this by:

1. Locking the body’s scroll initially (so the main page doesn’t move)
2. Listening for scroll/scroll-like events (mouse wheel, touch swipe)
3. Tracking a "virtual scroll" value to trigger animation thresholds
4. Animating each header section as we hit those thresholds
5. Unlocking the body scroll once all animations are complete

Step 1: HTML Structure #

First, set up your header with distinct segments that we’ll animate in:

<header class="animated-header">
  <div class="header__section header__section--1">
    <h1>Welcome to StaffHub</h1>
  </div>
  <div class="header__section header__section--2">
    <p>Manage your team schedule easily</p>
  </div>
  <div class="header__section header__section--3">
    <button>Get Started</button>
  </div>
</header>

<main class="page-content">
  <!-- Your regular page content here -->
</main>

Step 2: Base CSS #

Style the header sections to be full viewport height, hidden initially, and add animation classes:

body {
  margin: 0;
  overflow: hidden; /* Lock scroll initially */
}

.animated-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.header__section {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.header__section--active {
  opacity: 1;
  transform: translateY(0);
}

/* Unlock scroll when animation is done */
body.scroll-unlocked {
  overflow: auto;
}

.page-content {
  margin-top: 100vh; /* Push content below header initially */
}

Step 3: jQuery Implementation #

This is the core logic to handle scroll events, track virtual scroll, and trigger animations:

$(document).ready(function() {
  // Configuration - adjust these values to match your design
  const sectionCount = 3;
  const scrollThreshold = $(window).height() * 0.3; // How much scroll triggers next section
  let virtualScroll = 0;
  let currentSection = 0;
  let animationComplete = false;

  // Handle mouse wheel events
  $(window).on('wheel', function(e) {
    if (animationComplete) return;

    e.preventDefault();
    // Calculate scroll direction and increment virtual scroll
    const delta = e.originalEvent.deltaY > 0 ? 50 : -50;
    virtualScroll += delta;

    // Move to next section if we hit the threshold
    if (virtualScroll >= scrollThreshold) {
      nextSection();
      virtualScroll = 0;
    }
    // Allow scrolling back to previous section
    if (virtualScroll <= -scrollThreshold && currentSection > 0) {
      prevSection();
      virtualScroll = 0;
    }
  });

  // Handle touch swipe for mobile
  let touchStartY = 0;
  $(window).on('touchstart', function(e) {
    touchStartY = e.originalEvent.touches[0].clientY;
  });

  $(window).on('touchend', function(e) {
    if (animationComplete) return;

    const touchEndY = e.originalEvent.changedTouches[0].clientY;
    const swipeDiff = touchStartY - touchEndY;

    if (swipeDiff > 50) { // Swipe down
      nextSection();
    } else if (swipeDiff < -50 && currentSection > 0) { // Swipe up
      prevSection();
    }
  });

  // Animate to next section
  function nextSection() {
    if (currentSection >= sectionCount - 1) {
      finishAnimation();
      return;
    }

    $('.header__section').eq(currentSection).removeClass('header__section--active');
    currentSection++;
    $('.header__section').eq(currentSection).addClass('header__section--active');
  }

  // Animate to previous section
  function prevSection() {
    $('.header__section').eq(currentSection).removeClass('header__section--active');
    currentSection--;
    $('.header__section').eq(currentSection).addClass('header__section--active');
  }

  // Unlock scroll and clean up events once done
  function finishAnimation() {
    animationComplete = true;
    $('body').addClass('scroll-unlocked');
    $(window).off('wheel touchstart touchend'); // Remove event listeners to save performance
  }
});

Key Notes & Optimizations #

• Adjust Thresholds: Tweak scrollThreshold and the transition timing in CSS to match the feel of StaffHub’s header
• Performance: Add a throttle function to the wheel event listener if you notice jank (prevents too many rapid triggers)
• Animation Customization: Replace the translateY/opacity animations with whatever fits your design—fade, scale, or slide-in from different directions work great
• Accessibility: Make sure to add keyboard navigation support (e.g., arrow keys to navigate sections) for users who don’t use a mouse/touch

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