Bootstrap 4 fixed-top导航栏：下滑消失、上滑/回顶重现实现咨询

Got it, let's nail this navbar behavior you're aiming for. You've already got the down-scroll hide working past a certain point, but need to add the up-scroll reveal and ensure it shows when you're back at the top. Here's a complete, tested implementation that combines all those requirements:

Step 1: HTML Structure #

First, set up your Bootstrap 4 navbar with the fixed-top class, plus a custom class (we'll use scroll-behavior-navbar) to target our custom styles and JS:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top scroll-behavior-navbar">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<!-- Add some dummy content to test scrolling -->
<div style="height: 1500px; padding-top: 70px;">
  <p>Scroll down to see the navbar hide...</p>
  <p>Scroll up to see it slide back in...</p>
  <p>Scroll all the way to the top, it'll stay visible!</p>
</div>

Step 2: CSS for Slide Transition #

Add this CSS to handle the smooth slide animation. We'll use transform: translateY() to slide the navbar up/down, and a transition for the smooth effect:

/* Base navbar styles with transition */
.scroll-behavior-navbar {
  transition: transform 0.3s ease-in-out;
  /* Ensure navbar stays above content */
  z-index: 9999;
}

/* Class to hide navbar by sliding it up */
.scroll-behavior-navbar.navbar-hidden {
  transform: translateY(-100%);
}

/* Adjust body padding to prevent content from being hidden under fixed navbar */
body {
  padding-top: 56px; /* Match your navbar's height */
}

Step 3: JavaScript to Handle Scroll Logic #

This JS will track scroll direction and position, then toggle the navbar-hidden class accordingly. We'll also add a throttle to avoid excessive scroll event triggers:

// Track previous scroll position
let prevScrollPos = window.pageYOffset;
const navbar = document.querySelector('.scroll-behavior-navbar');
const scrollThreshold = 100; // Navbar hides after scrolling past this height

// Throttle function to limit how often scroll logic runs
function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  }
}

// Scroll event handler
const handleScroll = throttle(() => {
  const currentScrollPos = window.pageYOffset;

  // Case 1: Scrolling down past threshold -> hide navbar
  if (currentScrollPos > prevScrollPos && currentScrollPos > scrollThreshold) {
    navbar.classList.add('navbar-hidden');
  } 
  // Case 2: Scrolling up OR at the top -> show navbar
  else if (currentScrollPos < prevScrollPos || currentScrollPos <= 0) {
    navbar.classList.remove('navbar-hidden');
  }

  // Update previous scroll position for next check
  prevScrollPos = currentScrollPos;
}, 100); // Run every 100ms (adjust as needed)

// Attach scroll event listener
window.addEventListener('scroll', handleScroll);

Key Details Explained #

• Slide Animation: The transition property on the navbar makes the transform change smooth. When navbar-hidden is added, the navbar slides up 100% of its own height.
• Scroll Direction Detection: By comparing currentScrollPos to prevScrollPos, we tell if the user is scrolling up or down.
• Threshold Check: The scrollThreshold variable lets you control how far the user needs to scroll down before the navbar hides (adjust to your preference).
• Throttle Function: This prevents the scroll event from firing too frequently, which can cause performance issues on slower devices.
• Top-of-Page Check: The currentScrollPos <= 0 condition ensures the navbar is always visible when the user is at the very top of the page, no matter what.

Quick Notes #

• Make sure the body padding-top matches your navbar's height (Bootstrap 4's default navbar height is 56px for desktop, adjust if you have a custom height).
• If you're using Bootstrap's responsive navbar (collapsed on mobile), this logic works perfectly with it—no extra tweaks needed.
• Test on different screen sizes to ensure the behavior is consistent across devices.

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