How to set sticky navbar only for first section of page?

Earlier Bootstrap gave the option to set navbar fixed for certain sections and absolute for others in Affix jQuery plugin but the new Bootstrap 4.0 dropped this option and recommended to use javascript for that.

We can use Javascript to set the navbar as sticky for the first section and absolute for the rest section.
For doing that you just have to use window.onscroll the function which will determine the position on which the screen is and would then apply sticky or absolute position depending upon it.

Approach:
Here we have set a window.onscroll function in which we have set the variable navbarConst to the element whose id is “navbarSection” and then variable stickyConst is using “offsetTop” to return the offset coordinates of the navbarConst, relative to the document.

Syntax
Let us have a look at how we can use that:
Type the following code in script tag of your HTML inside body tag at the last.

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("nav_bar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.remove("sticky");
  } else {
    navbar.classList.add("sticky");
  }
}

Example:
Let us see the following example for better understanding with HTML:



filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
    <head>
        <title>GeeksforGeeks</title>
        <meta name="viewport" 
              secondSection="width=device-width, 
                             initial-scale=1" />
        <style>
            body {
                margin: 0;
                font-size: 26px;
                font-family: sans-serif;
            }
  
            .firstSection {
                background-color: #fa8072;
                padding: 30px;
                text-align: left;
            }
  
            #navbarSection {
                overflow: hidden;
                background-color: #c71585;
            }
  
            #navbarSection a {
                float: left;
                display: block;
                color: #f2f2f2;
                text-align: center;
                padding: 16px 16px;
                text-decoration: none;
                font-size: 16px;
            }
  
            #navbarSection a:hover {
                background-color: #ffe4b5;
                color: black;
            }
  
            #navbarSection a.active {
                background-color: red;
                color: white;
            }
  
            #secondSection {
                padding: 16px 35px;
                padding-top: 0;
                background-color: #66cdaa;
            }
  
            .stickyNavbar {
                position: sticky;
                top: 0;
                width: 100%;
            }
  
            .stickyNavbar,
            #secondSection {
                padding-top: 30px;
            }
        </style>
    </head>
    <body>
        <div id="navbarSection">
            <a class="active" href="#">Home</a>
            <a href="#">Page 1</a>
            <a href="#">Page 2</a>
        </div>
  
        <div class="firstSection">
            <h2>This is the first section. Scroll down 
              to see the effects of sticky navbar on
              first section and absolute on other 
              section.</h2>
            <b> Some texts to fill the section </b>
            <p>
                HTML stands for Hyper Text Markup
              Language. It is used to design web pages
              using markup language. HTML is the 
              combination of Hypertext and Markup 
              language. Hypertext defines the link
              between the web pages. Markup language is
                used to define the text document 
              within tag which defines the structure
              of web pages. HTML is a markup language
              which is used by the browser to manipulate
              text, images and other content to display 
              it in required format.
            </p>
        </div>
  
        <div id="secondSection">
            <br />
            <br />
            <br />
            <h3>From here First section ends and second
              start in which navbar should not be sticky.
          </h3>
            <br />
            <b> Some texts to fill the section </b>
            <p>
                HTML stands for Hyper Text Markup Language.
              It is used to design web pages using markup
              language. HTML is the combination of Hypertext
              and Markup language. Hypertext defines the
              link between the web pages. Markup language is
                used to define the text document within 
              tag which defines the structure of web pages.
              HTML is a markup language which is used by 
              the browser to manipulate text, images and 
              other content to display it in required format.
            </p>
        </div>
  
        <script>
            window.onscroll = function () {
                myFunction();
            };
  
            var navbarConst = 
                document.getElementById("navbarSection");
            var stickyConst = navbarConst.offsetTop;
            var navbarOther = 
                document.getElementById("secondSection");
            var stickyOther = navbarOther.offsetTop;
  
            function myFunction() {
                if (window.pageYOffset >= stickyOther) {
                    navbarSection.classList.remove(
                      "stickyNavbar");
                } else {
                    navbarSection.classList.add(
                      "stickyNavbar");
                }
            }
        </script>
    </body>
</html>

chevron_right


Explanation:
Here we have set a window.onscroll function in which we have set the variable navbarConst to the element whose id is “navbarSection” and then variable stickyConst is using “offsetTop” to return the offset coordinates of the navbarConst, relative to the document.

Then according to the Y coordinate of the screen, its position is set. When the screen’s Y coordinate is more than than the Y coordinate of the first section, then we remove the stickyNavbar class. Here stickyNavbar is the class in which we have made the position as sticky.

Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.