Position sticky not working in React JS nav bar

Question

I want the navigation bar in the below code to be sticky at top once I scroll down, but it isn't.

These are the codes below.

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;
    }
}

I ensured that the parent div is not having any overflow.

I want this nav_bar div to be sticky whenever I scroll down over other components (like Absorption component here).

Please help!

Answer 1

when an element is sticky it will stick as long as the scroll doesn't overpass the parent wrapper's height. in your code, the heading which is the parent of the sticky element only has height: 14em;, there's no enough space to stick in, plus the div of id="content" is overflowing form the parent, if you set the overflow:hidden; in #heading the content div will disappear. the key to see the stickiness is the height. try to change these things in your code:

#heading{
    width: 100%;
    background-color: rgba(48, 255, 186, 0.69);
    /* height: 14em; remove the height so it can take as mush as the children need*, 
    or if you must set its height, then set it in svh unit like maybe 120svh*/
    font-family: "Codystar", serif;
    display: block;
    z-index: 1;
    position: relative;
}

I hope this made sense and helped you.