We use cookies to ensure that we give you the best experience on our website.

Sticky Navigation Bar using HTML, CSS, and jQuery

Sticky Navigation Bar using HTML, CSS, and jQuery

In this tutorial, you will learn how to create a Sticky Navigation Bar using HTML, CSS, and jQuery library. The credit of this Sticky Navigation Bar goes to LearnWebCode.

If you see a demo of this Sticky Navigation Bar, click the following button.

Live Demo

HTML File

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sticky Navigation Bar</title>
</head>
<body>
    <div class="_logo">
        <h1>W3jar.Com</h1>
    </div>
    <nav id="my_navbar">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">Privacy</a></li>
        </ul>
    </nav>
    <div class="_content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dicta dolorem quasi consectetur fuga itaque saepe atque. Recusandae nihil blanditiis possimus quisquam, nam ullam quasi repellendus. Dolorum id facere earum.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nostrum necessitatibus animi adipisci voluptatibus, sequi obcaecati iste totam accusantium optio officia ullam veniam perspiciatis, minus quam reiciendis fugiat culpa, atque iure earum voluptatum commodi. Deleniti quod alias accusamus nesciunt repudiandae sed eius laborum quasi quia cupiditate? Nulla commodi culpa esse veniam odio nostrum vitae ad exercitationem minima perspiciatis! Ipsa architecto quod vitae nam ab dolor molestias sequi? Soluta aspernatur molestiae fuga voluptatibus voluptate eveniet harum expedita porro dolorum, rem sequi. Accusantium quo, fugit repudiandae totam perferendis, quidem adipisci inventore nesciunt beatae excepturi ut aliquam similique cumque dolore itaque dolorum harum.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, vel? Laudantium, iusto minima? Qui consequatur, blanditiis fugit cumque corporis assumenda quos harum. Libero, placeat tempore perferendis ullam fuga ipsam non quasi accusantium molestias autem pariatur sed iusto eius illo illum velit eligendi! Ad quas nam tempore dolorem cupiditate dignissimos commodi laboriosam doloribus quae magnam eius eaque sapiente earum maiores quibusdam voluptas maxime quasi perspiciatis doloremque consequuntur non, explicabo aliquam pariatur nulla. Obcaecati unde, dolorem fugit dolor magni debitis ab iste.</p>
    </div>
</body>
</html>

CSS File

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

._logo h1 {
  padding: 30px 10px;
  margin: 0;
  text-align: center;
  color: #444444;
}

#my_navbar {
  background: #f7f7f7;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

#my_navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#my_navbar ul li a {
  display: block;
  padding: 15px 10px;
  text-decoration: none;
  color: #555555;
  text-transform: uppercase;
}

#my_navbar ul li a:hover {
  background-color: #555555;
  color: #fff;
}

.fixed_top {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999999;
}

._content {
  max-width: 600px;
  margin: 0 auto;
  height: 2000px;
  padding: 10px;
}

._content p {
  line-height: 30px;
  font-size: 18px;
  text-align: justify;
}

Adding jQuery to the HTML File

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sticky Navigation Bar</title>
</head>
<body>
    <div class="_logo">
        <h1>W3jar.Com</h1>
    </div>
    <nav id="my_navbar">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">Privacy</a></li>
        </ul>
    </nav>
    <div class="_content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dicta dolorem quasi consectetur fuga itaque saepe atque. Recusandae nihil blanditiis possimus quisquam, nam ullam quasi repellendus. Dolorum id facere earum.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nostrum necessitatibus animi adipisci voluptatibus, sequi obcaecati iste totam accusantium optio officia ullam veniam perspiciatis, minus quam reiciendis fugiat culpa, atque iure earum voluptatum commodi. Deleniti quod alias accusamus nesciunt repudiandae sed eius laborum quasi quia cupiditate? Nulla commodi culpa esse veniam odio nostrum vitae ad exercitationem minima perspiciatis! Ipsa architecto quod vitae nam ab dolor molestias sequi? Soluta aspernatur molestiae fuga voluptatibus voluptate eveniet harum expedita porro dolorum, rem sequi. Accusantium quo, fugit repudiandae totam perferendis, quidem adipisci inventore nesciunt beatae excepturi ut aliquam similique cumque dolore itaque dolorum harum.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, vel? Laudantium, iusto minima? Qui consequatur, blanditiis fugit cumque corporis assumenda quos harum. Libero, placeat tempore perferendis ullam fuga ipsam non quasi accusantium molestias autem pariatur sed iusto eius illo illum velit eligendi! Ad quas nam tempore dolorem cupiditate dignissimos commodi laboriosam doloribus quae magnam eius eaque sapiente earum maiores quibusdam voluptas maxime quasi perspiciatis doloremque consequuntur non, explicabo aliquam pariatur nulla. Obcaecati unde, dolorem fugit dolor magni debitis ab iste.</p>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            var navBar = $('#my_navbar');
            var navOffsetTop = navBar.offset().top;

            navBar.wrap('<div class="nav-placeholder"></div>');
            
            var set_nav_placeholder_height = function(){
                $('.nav-placeholder').height(navBar.outerHeight());
            }

            set_nav_placeholder_height();

            $(window).resize(function(){
                set_nav_placeholder_height();
            });
            
            $(window).scroll(function(){
                var scrollPosition = $(window).scrollTop();

                if(scrollPosition >= navOffsetTop){
                    navBar.addClass('fixed_top');
                }
                else{
                    navBar.removeClass('fixed_top');
                }
                
            });
        });
    </script>
</body>
</html>

Final Code

Live Demo
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sticky Navigation Bar</title>
    <style>
        *,
        *::before,
        *::after {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        }

        body {
        font-family: sans-serif;
        margin: 0;
        padding: 0;
        }

        ._logo h1 {
        padding: 30px 10px;
        margin: 0;
        text-align: center;
        color: #444444;
        }

        #my_navbar {
        background: #f7f7f7;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        }

        #my_navbar ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        }

        #my_navbar ul li a {
        display: block;
        padding: 15px 10px;
        text-decoration: none;
        color: #555555;
        text-transform: uppercase;
        }

        #my_navbar ul li a:hover {
        background-color: #555555;
        color: #fff;
        }

        .fixed_top {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999999;
        }

        ._content {
        max-width: 600px;
        margin: 0 auto;
        height: 2000px;
        padding: 10px;
        }

        ._content p {
        line-height: 30px;
        font-size: 18px;
        text-align: justify;
        }
    </style>
</head>
<body>
    <div class="_logo">
        <h1>W3jar.Com</h1>
    </div>
    <nav id="my_navbar">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">Privacy</a></li>
        </ul>
    </nav>
    <div class="_content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dicta dolorem quasi consectetur fuga itaque saepe atque. Recusandae nihil blanditiis possimus quisquam, nam ullam quasi repellendus. Dolorum id facere earum.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nostrum necessitatibus animi adipisci voluptatibus, sequi obcaecati iste totam accusantium optio officia ullam veniam perspiciatis, minus quam reiciendis fugiat culpa, atque iure earum voluptatum commodi. Deleniti quod alias accusamus nesciunt repudiandae sed eius laborum quasi quia cupiditate? Nulla commodi culpa esse veniam odio nostrum vitae ad exercitationem minima perspiciatis! Ipsa architecto quod vitae nam ab dolor molestias sequi? Soluta aspernatur molestiae fuga voluptatibus voluptate eveniet harum expedita porro dolorum, rem sequi. Accusantium quo, fugit repudiandae totam perferendis, quidem adipisci inventore nesciunt beatae excepturi ut aliquam similique cumque dolore itaque dolorum harum.</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, vel? Laudantium, iusto minima? Qui consequatur, blanditiis fugit cumque corporis assumenda quos harum. Libero, placeat tempore perferendis ullam fuga ipsam non quasi accusantium molestias autem pariatur sed iusto eius illo illum velit eligendi! Ad quas nam tempore dolorem cupiditate dignissimos commodi laboriosam doloribus quae magnam eius eaque sapiente earum maiores quibusdam voluptas maxime quasi perspiciatis doloremque consequuntur non, explicabo aliquam pariatur nulla. Obcaecati unde, dolorem fugit dolor magni debitis ab iste.</p>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            var navBar = $('#my_navbar');
            var navOffsetTop = navBar.offset().top;

            navBar.wrap('<div class="nav-placeholder"></div>');
            
            var set_nav_placeholder_height = function(){
                $('.nav-placeholder').height(navBar.outerHeight());
            }

            set_nav_placeholder_height();

            $(window).resize(function(){
                set_nav_placeholder_height();
            });
            
            $(window).scroll(function(){
                var scrollPosition = $(window).scrollTop();

                if(scrollPosition >= navOffsetTop){
                    navBar.addClass('fixed_top');
                }
                else{
                    navBar.removeClass('fixed_top');
                }
                
            });
        });
    </script>
</body>
</html>

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *