How to create a sticky navigation bar

In this article, I will show you how to create a sticky navigation bar for your website.

Demo & Source Code

Html

<div class=”header”>
<h2>Header</h2>
<p>Please Scroll down to see the sti…


This content originally appeared on DEV Community and was authored by Anjan Shomooder

In this article, I will show you how to create a sticky navigation bar for your website.

Demo & Source Code

Html 

<div class="header">
    <h2>Header</h2>
    <p>Please Scroll down to see the sticky effect.</p>
</div>

<div id="navbar">
    <a class="active" href="#">Home</a>
    <a href="#">News</a>
    <a href="#">Blog</a>
    <a href="#">Videos</a>
    <a href="#">Contact</a>
</div>

<div class="content">
    <p>The navbar will stick to the top when you reach its scroll position.</p>
    <p>
        Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum
        definitiones no quo, maluisset concludaturque et eum, altera fabulas ut
        quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert
        laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
        molestiae voluptatibus.
    </p>

    <!-- more dummy text for have scrolling -->
</div>

CSS 

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

body {
    margin: 0;
    font-size: 28px;
    font-family: Arial, Helvetica, sans-serif;
}

.header {
    background-color: #f1f1f1;
    padding: 30px;
    text-align: center;
}

#navbar {
    background-color: #333;
    display: flex;
}

#navbar a {
    display: block;
    flex-basis: 20%;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

#navbar a:hover {
    background-color: #ddd;
    color: black;
}

#navbar a.active {
    background-color: red;
    color: white;
}

.content {
    padding: 16px;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.sticky + .content {
    padding-top: 60px;
}

Explanation:

  • We are not going to use position: sticky on this page.
  • There are some basic styles. I don't need to explain them. But
  • We have a sticky class style that is not attached to any element. sticky class will make the element fixed to the top of the page.
  • When the navigation bar will reach the top of the page, we will add the sticky class and it will be fixed to the top of the page.
  • Then we will push the content down by 60px. To prevent sudden quick movement (as the navigation bar gets a new position at the top of the page.

JavaScript code 

const navbar = document.getElementById('navbar')
const navbarPos = navbar.offsetTop

const handleScroll = () => {
    const STICKY = 'sticky'

    if (window.pageYOffset >= navbarPos) {
        navbar.classList.add(STICKY)
        return true
    }

    navbar.classList.remove(STICKY)
}

window.onscroll = function () {
    handleScroll()
}

Explanation:

  • We are using the onscroll event to check the scroll position of the page.
  • navbarPos is the position of the navigation bar.
  • If the scroll position of the page is greater than or equal to the position of the navigation bar, that means the navbar has reached the top of the page.
  • Then we will add the sticky class to the navigation bar.
  • Else we will remove the sticky class from the navigation bar.

And that's it. Our final result:

Shameless Plug

I have made few project based videos with vanilla HTML, CSS, and JavaScript.





You will learn about:

  • Javascript intersection observer to add cool effects
  • DOM manipulation
  • Aligning elements with CSS positions.
  • How to make responsive websites.

These will be great projects to brush up on your front end skills.

If you are interested you can check the videos.

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

By the way, I am looking for a new opportunity in a company where I can provide great value with my skills. If you are a recruiter, looking for someone skilled in full stack web development and passionate about revolutionizing the world, feel free to contact me. Also, I am open to talking about any freelance project.

See my work from here

Contacts

Videos might you might want to watch:





Blogs you might want to read:


This content originally appeared on DEV Community and was authored by Anjan Shomooder


Print Share Comment Cite Upload Translate Updates
APA

Anjan Shomooder | Sciencx (2022-02-10T12:24:01+00:00) How to create a sticky navigation bar. Retrieved from https://www.scien.cx/2022/02/10/how-to-create-a-sticky-navigation-bar/

MLA
" » How to create a sticky navigation bar." Anjan Shomooder | Sciencx - Thursday February 10, 2022, https://www.scien.cx/2022/02/10/how-to-create-a-sticky-navigation-bar/
HARVARD
Anjan Shomooder | Sciencx Thursday February 10, 2022 » How to create a sticky navigation bar., viewed ,<https://www.scien.cx/2022/02/10/how-to-create-a-sticky-navigation-bar/>
VANCOUVER
Anjan Shomooder | Sciencx - » How to create a sticky navigation bar. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/02/10/how-to-create-a-sticky-navigation-bar/
CHICAGO
" » How to create a sticky navigation bar." Anjan Shomooder | Sciencx - Accessed . https://www.scien.cx/2022/02/10/how-to-create-a-sticky-navigation-bar/
IEEE
" » How to create a sticky navigation bar." Anjan Shomooder | Sciencx [Online]. Available: https://www.scien.cx/2022/02/10/how-to-create-a-sticky-navigation-bar/. [Accessed: ]
rf:citation
» How to create a sticky navigation bar | Anjan Shomooder | Sciencx | https://www.scien.cx/2022/02/10/how-to-create-a-sticky-navigation-bar/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts