Why is my position sticky not working when scroll outside section-CodePudding

So I have a website structured in sections (used also for hyperlinks in nav menu). I have set position: sticky for my navbar and it seems it is working until I scroll outside the section. (In my example, I want my red navbar to be visible not only in the yellow section, but in any section of the website, yellow, green or blue).

$('.links a[href^="#"]').click(function (event) {
  event.preventDefault();
  const section =  document.querySelector(event.target.getAttribute("href"));
  section.scrollIntoView({
    behavior: "smooth"
  });
})

$(document).scroll(function () { 
  $("nav").toggleClass("sticky", window.scrollY > 0);
});

body{
    margin: 0;
    box-sizing: border-box;

}


    nav.sticky{
        background-color: blue;
        border-bottom: 10px solid black;
    }
    
    nav img{
      width: 10vh;
    }
    
    nav.title-bar{
        background-color: red;
        display: block;
        position: sticky;
        top: 0;
        width: 100%;
        transition: 0.5s;
        height: 50vh;
        z-index: 10000;
        color: white;


    nav.title-bar > *{
            padding: 20vh;
    }

    }
    
    #first{
       background-color: yellow;
    }
    
    #second{
      background-color: green;
    }
    
    #third{
    background-color: blue;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section id="first">

        <nav >
            <div >
                <img src="https://picsum.photos/200" alt="logo" id="logo">
                <h1 id="title"><a href=".">My Website</a></h1>
            </div>

                <div >
                    <a href="#first" >First</a>
                    <a href="#second">Second</a></label>
                    <a href="#third">Third</a></label>
                </div>
        </nav>

        <div >
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel mollitia tempora labore, ad laboriosam modi recusandae ipsam tempore quasi tenetur, veritatis, alias pariatur qui doloremque accusamus temporibus doloribus porro aperiam?</p>
            <img src="https://picsum.photos/200/300">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At maiores sunt voluptatum quas laboriosam, ducimus nesciunt ipsa quis, ullam rerum ipsam consectetur aperiam, mollitia totam aliquid sit exercitationem eius facilis?</p>
            <img src="https://picsum.photos/200/301">
        </div>

    </section>

    <section id="second">
        <div >
            <img src="https://picsum.photos/200/302">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum quod, mollitia cumque quisquam itaque earum vel voluptatibus nesciunt quas provident inventore doloribus amet est possimus, consectetur maxime consequatur. Delectus, corporis?</p>
        </div>

        <div >
            <img src="https://picsum.photos/200/303">
            <ul>
                <li>aaaa</li>
                <li>bbbb</li>
                <li>cccc</li>
                <li>dddd</li>
            </ul>
        </div>
    </section>
    
    
        <section id="third">
        <div >
            <img src="https://picsum.photos/200/302">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum quod, mollitia cumque quisquam itaque earum vel voluptatibus nesciunt quas provident inventore doloribus amet est possimus, consectetur maxime consequatur. Delectus, corporis?</p>
        </div>

        <div >
            <img src="https://picsum.photos/200/303">
            <ul>
                <li>aaaa</li>
                <li>bbbb</li>
                <li>cccc</li>
                <li>dddd</li>
            </ul>
        </div>
    </section>
</body>
</html>

CodePudding user response：

MDN Web Docs says:

Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. [1]

Your <nav snippet-code-js lang-js prettyprint-override">$('.links a[href^="#"]').click(function (event) { event.preventDefault(); const section = document.querySelector(event.target.getAttribute("href")); section.scrollIntoView({ behavior: "smooth" }); })

body{
    margin: 0;
    box-sizing: border-box;

}


    nav.sticky{
        background-color: blue;
        border-bottom: 10px solid black;
    }
    
    nav img{
      width: 10vh;
    }
    
    nav.title-bar{
        background-color: red;
        display: block;
        position: sticky;
        top: 0;
        width: 100%;
        transition: 0.5s;
        height: 50vh;
        z-index: 10000;
        color: white;


    nav.title-bar > *{
            padding: 20vh;
    }

    }
    
    #first{
       background-color: yellow;
    }
    
    #second{
      background-color: green;
    }
    
    #third{
    background-color: blue;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <nav >
            <div >
                <img src="https://picsum.photos/200" alt="logo" id="logo">
                <h1 id="title"><a href=".">My Website</a></h1>
            </div>

                <div >
                    <a href="#first" >First</a>
                    <a href="#second">Second</a></label>
                    <a href="#third">Third</a></label>
                </div>
        </nav>
    <section id="first">
        <div >
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel mollitia tempora labore, ad laboriosam modi recusandae ipsam tempore quasi tenetur, veritatis, alias pariatur qui doloremque accusamus temporibus doloribus porro aperiam?</p>
            <img src="https://picsum.photos/200/300">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At maiores sunt voluptatum quas laboriosam, ducimus nesciunt ipsa quis, ullam rerum ipsam consectetur aperiam, mollitia totam aliquid sit exercitationem eius facilis?</p>
            <img src="https://picsum.photos/200/301">
        </div>

    </section>

    <section id="second">
        <div >
            <img src="https://picsum.photos/200/302">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum quod, mollitia cumque quisquam itaque earum vel voluptatibus nesciunt quas provident inventore doloribus amet est possimus, consectetur maxime consequatur. Delectus, corporis?</p>
        </div>

        <div >
            <img src="https://picsum.photos/200/303">
            <ul>
                <li>aaaa</li>
                <li>bbbb</li>
                <li>cccc</li>
                <li>dddd</li>
            </ul>
        </div>
    </section>
    
    
        <section id="third">
        <div >
            <img src="https://picsum.photos/200/302">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum quod, mollitia cumque quisquam itaque earum vel voluptatibus nesciunt quas provident inventore doloribus amet est possimus, consectetur maxime consequatur. Delectus, corporis?</p>
        </div>

        <div >
            <img src="https://picsum.photos/200/303">
            <ul>
                <li>aaaa</li>
                <li>bbbb</li>
                <li>cccc</li>
                <li>dddd</li>
            </ul>
        </div>
    </section>
</body>
</html>