页面边距引发导航栏隐藏问题（React Styled Components）

我使用React Styled Components开发页面，页面包含导航栏和英雄区块，滚动页面一小段距离后导航栏会隐藏。

已设置的全局CSS： #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Play", sans-serif;
}

导航栏的Styled Components样式： #

background: #000;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
position: sticky;
top: 0;
z-index: 0;

@media screen and (max-width: 960px) {
  transition: 0.8s all ease;
}

问题截图： #

问题排查与解决： #

• z-index值过低导致被覆盖：当前导航栏z-index设为0，若页面其他元素（比如英雄区块）的z-index更高，会把导航栏挡住。建议将导航栏的z-index调整为999，确保它处于页面层级的最上方。
• 缺少滚动触发的样式切换逻辑：position: sticky本身不会让元素隐藏，需要通过监听滚动事件动态修改导航栏样式。可以通过React的状态管理，配合transform属性实现平滑隐藏/显示。
• 优化过渡动画范围：当前仅在移动端设置了transition，建议把过渡属性移到主样式中，让所有屏幕尺寸下都有平滑效果。

完整示例代码： #

import { useState, useEffect } from 'react';
import styled from 'styled-components';

// 定义导航栏样式组件
const Navbar = styled.nav`
  background: #000;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  position: sticky;
  top: 0;
  z-index: 999;
  transition: 0.8s all ease;
  /* 根据isHidden状态控制显示/隐藏 */
  transform: ${props => props.isHidden ? 'translateY(-100%)' : 'translateY(0)'};
`;

const HeroSection = styled.div`
  height: 100vh;
  background: #f0f0f0;
`;

const App = () => {
  const [isNavHidden, setIsNavHidden] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      // 滚动距离超过导航栏高度时隐藏导航栏
      setIsNavHidden(window.scrollY > 80);
    };

    window.addEventListener('scroll', handleScroll);
    // 组件卸载时移除监听
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <>
      <Navbar isHidden={isNavHidden}>导航栏内容</Navbar>
      <HeroSection>英雄区块内容</HeroSection>
    </>
  );
};

export default App;

内容的提问来源于stack exchange，提问作者Abdelouahed BEN MHAMED