如何在React或JavaScript中实现滚动时隐藏导航栏或其他区块？

Great start with your scroll-hiding navbar implementation! The core logic of comparing previous and current scroll positions is solid, but we can refine this approach for better maintainability, performance, and alignment with modern best practices. Let's walk through optimized versions for both vanilla JavaScript and React.

Vanilla JavaScript Optimization #

Your current code directly manipulates inline styles, which can make styling hard to manage. Instead, we'll use CSS class toggling, add performance-throttling to avoid excessive scroll event triggers, and handle edge cases like staying visible at the top of the page.

Step 1: Update CSS #

Add a dedicated class for the hidden state, keeping all styling in your stylesheet:

body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
}
#navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  transition: top 0.3s ease; /* Smooth transition */
  display: flex;
  align-items: center;
  justify-content: center;
}
#navbar a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}
#navbar a:hover {
  background-color: #ddd;
  color: black;
}
/* New hidden class */
#navbar.hidden {
  top: -50px;
}

Step 2: Optimized JavaScript with Throttling #

Throttling limits how often the scroll handler runs, which is easier on browser performance. We'll also ensure the navbar stays visible when at the top of the page:

const navbar = document.getElementById('navbar');
let prevScrollPos = window.pageYOffset;

// Throttle function to limit execution frequency
function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func(...args);
    }
  };
}

function handleScroll() {
  const currentScrollPos = window.pageYOffset;
  // Show navbar if scrolling up OR at the top of the page
  if (prevScrollPos > currentScrollPos || currentScrollPos === 0) {
    navbar.classList.remove('hidden');
  } else {
    navbar.classList.add('hidden');
  }
  prevScrollPos = currentScrollPos;
}

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

React Optimization #

Your current React code has a key issue: binding the scroll event inside render() means it gets reattached on every render, which is inefficient. We'll use React Hooks (for functional components) to properly manage the event listener, use state instead of direct DOM manipulation, and add throttling.

Functional Component with Hooks #

This follows React best practices by separating concerns, cleaning up event listeners, and using state for UI control:

import { useState, useEffect } from 'react';

function Header() {
  const [isNavVisible, setIsNavVisible] = useState(true);
  let prevScrollPos = window.pageYOffset;

  const throttle = (func, delay) => {
    let lastCall = 0;
    return function(...args) {
      const now = Date.now();
      if (now - lastCall >= delay) {
        lastCall = now;
        func(...args);
      }
    };
  };

  const handleScroll = () => {
    const currentScrollPos = window.pageYOffset;
    // Update visibility state
    setIsNavVisible(prevScrollPos > currentScrollPos || currentScrollPos === 0);
    prevScrollPos = currentScrollPos;
  };

  useEffect(() => {
    const throttledScrollHandler = throttle(handleScroll, 100);
    window.addEventListener('scroll', throttledScrollHandler);

    // Cleanup event listener on component unmount
    return () => {
      window.removeEventListener('scroll', throttledScrollHandler);
    };
  }, []); // Empty dependency array means this runs once on mount

  return (
    <header
      className={`header gradientBg1 ${!isNavVisible ? 'hidden' : ''}`}
      style={{ 
        transition: 'top 0.3s ease', 
        position: 'fixed', 
        zIndex: 1,
        top: 0,
        width: '100%'
      }}
    >
      <nav>
        <a href="#home">Home</a>
        <a href="#news">About</a>
        <a href="#contact">Services</a>
        <a href="#contact">FAQ</a>
      </nav>
    </header>
  );
}

export default Header;

Corresponding CSS for React #

Add the hidden class to your global stylesheet:

.header.hidden {
  top: -55px;
}

Key Improvements Over Your Original Code #

• Separation of Concerns: All styling lives in CSS classes instead of inline styles, making it easier to modify and debug.
• Performance: Throttling reduces the number of times the scroll handler runs, preventing unnecessary browser work.
• Edge Case Handling: The navbar stays visible when at the top of the page, which is a better user experience.
• React Best Practices: Event listeners are added/removed properly with useEffect, avoiding memory leaks and redundant bindings. State management replaces direct DOM manipulation, aligning with React's declarative paradigm.

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