How to create a dynamic fixed navigation system on a web page.

Hello devs,

I have a simple but useful topic to blog about so lend me your time, I promise it will be worth it.

We will be looking at how to render a dynamic navbar on a web application. Our navbar will start out as a block element and we'll dynamically change it to a fixed element when to scroll down our Y-Axis of our window using JavaScript.

This will be our html template:

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Rebelbase</title>
</head>
<body>
    <div id="container">
        <nav id="nav" class="block">
            <div class="">
                <h1>Fixed Navigation</h1>
            </div>
            <div class="list">
                <ul>
                    <li>Home</li>
                    <li>Profile</li>
                    <li>Cart</li>
                    <li>Logout</li>
                </ul>
            </div>
        </nav>
        <main>
            <section class="section">
                <h1 class="h1">Section One</h1>
                <article class="art">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem animi placeat minus ipsa nisi nostrum velit, officiis neque soluta possimus aliquid, commodi ad maiores laudantium quae, dolore repudiandae facilis qui.
                    Quo dolor inventore aspernatur quis, delectus impedit cupiditate numquam porro est dolore laudantium nisi ratione magni quasi alias, vero soluta atque rerum temporibus natus eius pariatur. Distinctio impedit minima reprehenderit!
                    Earum, facilis id? Accusamus veritatis voluptates corporis rem mollitia odio iste earum animi amet fugit, ipsa architecto totam soluta accusantium! Delectus, rem consequuntur omnis inventore voluptate laborum! Necessitatibus, atque cum.
                    Ducimus, excepturi. Beatae atque quas iste commodi vel, neque corrupti asperiores nostrum maiores ipsa laudantium assumenda odio ipsum, nam a laboriosam amet quisquam, facere veritatis. Saepe ipsum dolorum aut deserunt?
                    Rem, quam saepe numquam reiciendis sunt corrupti esse, veniam iste delectus officiis inventore excepturi repellat culpa cumque quas. Eos voluptas eveniet sunt ad aperiam nulla nobis non ratione, adipisci cumque!
                    Odit nostrum molestias, facere officia fugiat ipsam fugit voluptates dolore eaque necessitatibus nesciunt sed beatae. Eum quidem, totam necessitatibus eius aperiam neque ex esse labore nihil sequi facilis, dicta molestias!
                    Harum dolor dolorum illum et expedita repellendus dicta, nemo recusandae sequi suscipit ut necessitatibus labore consequatur sunt quam, modi aliquid reprehenderit esse. Dolores alias, illum recusandae temporibus harum voluptates atque.
                    Ducimus quaerat earum perspiciatis doloribus, alias suscipit nobis esse officiis voluptate magnam non maiores eos ex, dolor quis pariatur corrupti sed dolorum fugiat dignissimos? Ratione eveniet fugiat ea. Sint, mollitia!
                    Minima hic eaque distinctio, consequatur cupiditate autem numquam laboriosam, molestiae soluta quidem laudantium? Quam asperiores soluta temporibus in aliquam accusamus doloribus explicabo animi ad, quibusdam nemo tenetur ipsum amet aspernatur.
                    Sed distinctio quidem, odit reiciendis alias error exercitationem placeat voluptates at dolore? Voluptate adipisci quod assumenda possimus. Nostrum error ut illum incidunt iste doloremque suscipit corrupti ex nesciunt nobis. Culpa.
                </article>
            </section>
            <section class="section">
                <h1 class="h1">Section Two</h1>
                <article class="art">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem animi placeat minus ipsa nisi nostrum velit, officiis neque soluta possimus aliquid, commodi ad maiores laudantium quae, dolore repudiandae facilis qui.
                    Quo dolor inventore aspernatur quis, delectus impedit cupiditate numquam porro est dolore laudantium nisi ratione magni quasi alias, vero soluta atque rerum temporibus natus eius pariatur. Distinctio impedit minima reprehenderit!
                    Earum, facilis id? Accusamus veritatis voluptates corporis rem mollitia odio iste earum animi amet fugit, ipsa architecto totam soluta accusantium! Delectus, rem consequuntur omnis inventore voluptate laborum! Necessitatibus, atque cum.
                    Ducimus, excepturi. Beatae atque quas iste commodi vel, neque corrupti asperiores nostrum maiores ipsa laudantium assumenda odio ipsum, nam a laboriosam amet quisquam, facere veritatis. Saepe ipsum dolorum aut deserunt?
                    Rem, quam saepe numquam reiciendis sunt corrupti esse, veniam iste delectus officiis inventore excepturi repellat culpa cumque quas. Eos voluptas eveniet sunt ad aperiam nulla nobis non ratione, adipisci cumque!
                    Odit nostrum molestias, facere officia fugiat ipsam fugit voluptates dolore eaque necessitatibus nesciunt sed beatae. Eum quidem, totam necessitatibus eius aperiam neque ex esse labore nihil sequi facilis, dicta molestias!
                    Harum dolor dolorum illum et expedita repellendus dicta, nemo recusandae sequi suscipit ut necessitatibus labore consequatur sunt quam, modi aliquid reprehenderit esse. Dolores alias, illum recusandae temporibus harum voluptates atque.
                    Ducimus quaerat earum perspiciatis doloribus, alias suscipit nobis esse officiis voluptate magnam non maiores eos ex, dolor quis pariatur corrupti sed dolorum fugiat dignissimos? Ratione eveniet fugiat ea. Sint, mollitia!
                    Minima hic eaque distinctio, consequatur cupiditate autem numquam laboriosam, molestiae soluta quidem laudantium? Quam asperiores soluta temporibus in aliquam accusamus doloribus explicabo animi ad, quibusdam nemo tenetur ipsum amet aspernatur.
                    Sed distinctio quidem, odit reiciendis alias error exercitationem placeat voluptates at dolore? Voluptate adipisci quod assumenda possimus. Nostrum error ut illum incidunt iste doloremque suscipit corrupti ex nesciunt nobis. Culpa.
                </article>
            </section>
            <section class="section">
                <h1 class="h1">Section Three</h1>
                <article class="art">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem animi placeat minus ipsa nisi nostrum velit, officiis neque soluta possimus aliquid, commodi ad maiores laudantium quae, dolore repudiandae facilis qui.
                    Quo dolor inventore aspernatur quis, delectus impedit cupiditate numquam porro est dolore laudantium nisi ratione magni quasi alias, vero soluta atque rerum temporibus natus eius pariatur. Distinctio impedit minima reprehenderit!
                    Earum, facilis id? Accusamus veritatis voluptates corporis rem mollitia odio iste earum animi amet fugit, ipsa architecto totam soluta accusantium! Delectus, rem consequuntur omnis inventore voluptate laborum! Necessitatibus, atque cum.
                    Ducimus, excepturi. Beatae atque quas iste commodi vel, neque corrupti asperiores nostrum maiores ipsa laudantium assumenda odio ipsum, nam a laboriosam amet quisquam, facere veritatis. Saepe ipsum dolorum aut deserunt?
                    Rem, quam saepe numquam reiciendis sunt corrupti esse, veniam iste delectus officiis inventore excepturi repellat culpa cumque quas. Eos voluptas eveniet sunt ad aperiam nulla nobis non ratione, adipisci cumque!
                    Odit nostrum molestias, facere officia fugiat ipsam fugit voluptates dolore eaque necessitatibus nesciunt sed beatae. Eum quidem, totam necessitatibus eius aperiam neque ex esse labore nihil sequi facilis, dicta molestias!
                    Harum dolor dolorum illum et expedita repellendus dicta, nemo recusandae sequi suscipit ut necessitatibus labore consequatur sunt quam, modi aliquid reprehenderit esse. Dolores alias, illum recusandae temporibus harum voluptates atque.
                    Ducimus quaerat earum perspiciatis doloribus, alias suscipit nobis esse officiis voluptate magnam non maiores eos ex, dolor quis pariatur corrupti sed dolorum fugiat dignissimos? Ratione eveniet fugiat ea. Sint, mollitia!
                    Minima hic eaque distinctio, consequatur cupiditate autem numquam laboriosam, molestiae soluta quidem laudantium? Quam asperiores soluta temporibus in aliquam accusamus doloribus explicabo animi ad, quibusdam nemo tenetur ipsum amet aspernatur.
                    Sed distinctio quidem, odit reiciendis alias error exercitationem placeat voluptates at dolore? Voluptate adipisci quod assumenda possimus. Nostrum error ut illum incidunt iste doloremque suscipit corrupti ex nesciunt nobis. Culpa.
                </article>
            </section>
        </main>
    </div>

    <script src="index.js"></script>
</body>
</html>

The focus of this blog will be on our "nav" element that currently has an id of nav and a class of block.

Let's take a look at the css I have applied:

*{
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    overflow-x: hidden;
}


body{
    width: 100%;
    height: 100%;
}

#container{
    width: 100%;
    min-height: 100vh;
}

#container .block{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    background: lightcoral;
    transition: all 500ms ease-in-out;
}

#container .fixed {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    padding: 14px;
    z-index: 10;
    background: lightcoral;
    transition: all 500ms ease-in-out;
}

#container nav .list ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

#container nav .list ul li{
    list-style: none;
    cursor: pointer;
}


#container main .section {
    padding: 13px 8px;
}

The idea here is to dynamic change the class of our nav element from block to fixed using JavaScript, I have already applied css attributes to these two class.

Now let's focus on the fun bit.

window.addEventListener('scroll', () => {
    /**
     * I'm setting a scroll event on the window
     * Then assign var currentScrollPosition the value of window.pageYOffset
     * window.pageYOffset will help us track the current position on our Y-axis
     * When we're at the very top of our window, y-axis will be 0
     * and the value will increase as we scroll down the window page.
     * The moment move from point 0, we'll swap the block class with the fixed class
     * 
     */
    let currentScrollPosition = window.pageYOffset;
    let nav = document.getElementById('nav');
    if(nav && currentScrollPosition > 0){
        nav.classList.remove('block');
        nav.classList.add('fixed');
    }else{
        nav.classList.remove('fixed');
        nav.classList.add('block');
    }

    console.log(currentScrollPosition)

})

Allow me to explain why I included the "nav" element in the if conditional statement.

In building complex web applications, we often have multiple layouts catering to different user types, such as guests, authenticated users, and administrators. Therefore, our navbar may not always be present, resulting in an error in the console. The conditional statement is used to prevent this error from occurring.

However, I must note that this method is primarily intended for beginners. Experienced developers would typically use frameworks like Vue.js, React, Alpine.js, Laravel, and Tailwind CSS, which provide easy implementation of this feature

You can watch a youTube tutorial, please subscribe and be sure to follow me on twitter, gitHub, showwcase.

Thank you for your time,
Jeffrey.

Blog

How to create a dynamic fixed navigation system on a web page.

Jeffrey Kwade

Join Our Newsletter. No Spam, Only the good stuff.

Related