React JS导航栏position: sticky不生效问题求助

问题描述 #

设置position: sticky后导航栏无法在页面滚动时固定在顶部，相关代码如下：

App.jsx #

import Absorption from './Absorption';
import './App.css';

export default function App(){

  return(
  <>
    <div id="heading">
      <div id="heading_topic">Separation Process</div>
      <div id="nav_bar">
        <div className="nav_item">Separation Process</div>
        <div className="nav_item">Absorption</div>
        <div className="nav_item">Distillation</div>
        <div className="nav_item">Extraction</div>
        <div className="nav_item">Humidification</div>
      </div>
      <div id="content">
        <Absorption />
      </div>
    </div>
  </>
)
}

App.css #

body{
    background-color: white;
    padding: 0;
    margin: 0;
}

*{
    margin: 0;
    padding: 0;
}

#heading{
    width: 100%;
    background-color: rgba(48, 255, 186, 0.69);
    height: 14em;
    font-family: "Codystar", serif;
    display: block;
    z-index: 1;
}

#heading_topic{
    width: 100%;
    height: 75%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    font-weight: bold;
    letter-spacing: 10px;
}

#nav_bar{
    width: 100%;
    height: 25%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgba(31, 31, 31, 0.049);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav_item{
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.3s;
}

.nav_item:hover{
    background-color: rgba(0, 0, 0, 0.208);
}


@media screen and (max-width: 800px) {

    #heading{
        height: 10em;
    }
    
    #heading_topic{
        width: 100%;
        font-size: 2em;
        letter-spacing: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #nav_bar{
        width: 100%;
        background-color: rgba(31, 31, 31, 0.049);
        left: 0%;
    }

    .nav_item{
        width: 100%;
        font-size: 0;
    }
}

问题原因 #

position: sticky的生效范围受限于父元素的滚动边界，当前#heading设置了固定高度14em，导航栏#nav_bar作为其子元素，只能在#heading的高度范围内实现“粘性”定位，无法超出父容器的固定高度限制，因此滚动页面时无法固定在视口顶部。

解决方案 #

调整DOM结构，将导航栏从固定高度的#heading容器中移出，使其直接作为body的子元素，让sticky基于整个视口生效：

修改后的App.jsx #

import Absorption from './Absorption';
import './App.css';

export default function App(){

  return(
  <>
    <div id="heading">
      <div id="heading_topic">Separation Process</div>
    </div>
    <div id="nav_bar">
      <div className="nav_item">Separation Process</div>
      <div className="nav_item">Absorption</div>
      <div className="nav_item">Distillation</div>
      <div className="nav_item">Extraction</div>
      <div className="nav_item">Humidification</div>
    </div>
    <div id="content">
      <Absorption />
    </div>
  </>
)
}

同步调整App.css #

修改#heading和#nav_bar的样式，适配新结构并保留原视觉效果：

#heading{
    width: 100%;
    background-color: rgba(48, 255, 186, 0.69);
    height: 10.5em; /* 原14em的75%，对应原heading_topic的高度占比 */
    font-family: "Codystar", serif;
    display: block;
    z-index: 1;
}

#nav_bar{
    width: 100%;
    height: 3.5em; /* 原14em的25%，保持原高度 */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgba(31, 31, 31, 0.049);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* 响应式部分同步调整 */
@media screen and (max-width: 800px) {
    #heading{
        height: 7.5em; /* 原10em的75% */
    }
    
    #nav_bar{
        height: 2.5em; /* 原10em的25% */
        width: 100%;
        background-color: rgba(31, 31, 31, 0.049);
        left: 0%;
    }
}

修改后，导航栏不再受固定高度父容器的限制，滚动页面时会固定在视口顶部，同时保留原有样式和交互效果。

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