I want to make the navigation bar sticky-CodePudding

I want to make this navbar sticky, after applying the below css it behaves like sticky for one page but when I scroll more it goes up and don't behave like sticky. Please help me to fix this.

Sticky navbar works scrolling till header content but after scrolling beyond header it goes up and hide.

    #header {
      width: 100%;
      height: 100vh;
      background-image: url(/img/pp-desktop.png);
      background-size: cover;
      background-position: center;
    }

    .container {
      padding: 10px 10%;
    }

    .logo {
      width: 80px;
    }

    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
/* From here I added CSS for sticky behaviour....*/
      align-self: flex-start;
      position: -webkit-sticky; /* Safari */
      position: sticky;
      top: 0;
      z-index: 1;
    }

    nav ul li {
      display: inline-block;
      list-style: none;
      margin: 10px 20px;
    }


Sticky navbar works scrolling till header content but after scrolling beyond header it goes up and hide.

<div id="header">
    <div >

        <nav>
            <img src="/img/logo.png"  alt="" />
            <ul id="sidemenu">
                <li><a href="#header">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
                <i  onclick="closeMenu()"></i>
            </ul>
            <i  onclick="openMenu()"></i>
        </nav>

        <div >
            <p>Software Developer</p>
            <h1>Hi, I am <span>xyz</span> </br> from India</h1>
        </div>

    </div>
</div>



<div id="about">

    <div >

        <div >
            <div >
                <img src="/img/me.png" alt="">
            </div>
            <div >
                <h1 >About Me</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam
                    aspernatur earum tempora, adipisci consequatur ea temporibus quidem animi excepturi
                    est assumenda, eius debitis et deleniti accusamus reprehenderit deserunt labore!
                    Repellendus magnam cumque commodi corporis cum vel architecto sed. Quam laudantium
                    possimus doloribus cumque voluptatum placeat vero aut non libero a?</p>
                <div >
                    <p  onclick="opentab('skills')">Skills</p>
                    <p  onclick="opentab('experience')">Experience</p>
                    <p  onclick="opentab('education')">Education</p>
                </div>

                <div  id="skills">
                    <ul>
                        <li><span>Software Dev</span></br>Fullstack Developer</li>
                        <li><span>Software Dev</span></br>Fullstack Developer</li>
                        <li><span>Software Dev</span></br>Fullstack Developer</li>
                    </ul>
                </div>

                <div  id="experience">
                    <ul>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2020 - 2021</span></br>Fullstack Developer</li>
                    </ul>
                </div>

                <div  id="education">
                    <ul>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2020 - 2021</span></br>Fullstack Developer</li>
                    </ul>
                </div>

            </div>
        </div>

    </div>

</div>

CodePudding user response：

So, you might be confused between the use case of sticky and fixed.

fixed position content never leaves the viewport and it is always visible
sticky position context leaves the viewport when the parent is scrolled out of the viewport.

Hence, .header is scrolled out of view and the nav goes away with it.

In your case:

nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      align-self: flex-start;
      position: fixed;
      top: 0;
      z-index: 1;
    }

This should fix the issue. If you want multiple headers for each container, you may use sticky. I hope this helps!