Creating a Sticky Navigation Bar with CSS and JavaScript

Creating a Sticky Navigation Bar with CSS and JavaScript

Introduction:

A sticky navigation bar remains fixed at the top of the screen as the user scrolls down the page, providing easy access to crucial navigation links. This design element can significantly improve the user experience on your website, especially on lengthy pages with a lot of content. In this tutorial, we will walk you through the process of creating a sticky navigation bar using CSS and JavaScript.

1. Set up the HTML structure

Start by creating the HTML structure for your navigation bar. Here's a simple example:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Sticky Navigation Example</title>
  7. <link rel="stylesheet" href="styles.css">
  8. </head>
  9. <body>
  10. <header id="header">
  11. <nav>
  12. <ul>
  13. <li><a href="#home">Home</a></li>
  14. <li><a href="#about">About</a></li>
  15. <li><a href="#services">Services</a></li>
  16. <li><a href="#contact">Contact</a></li>
  17. </ul>
  18. </nav>
  19. </header>
  20. <main>
  21. <!-- Your main content goes here -->
  22. </main>
  23. <script src="script.js"></script>
  24. </body>
  25. </html>

2. Style the navigation bar with CSS

Now, apply some basic styling to your navigation bar using CSS:

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6.  
  7. body {
  8. font-family: Arial, sans-serif;
  9. }
  10.  
  11. #header {
  12. background-color: #333;
  13. padding: 10px;
  14. }
  15.  
  16. nav ul {
  17. display: flex;
  18. justify-content: space-around;
  19. list-style-type: none;
  20. }
  21.  
  22. nav a {
  23. color: white;
  24. text-decoration: none;
  25. }

3. Make the navigation bar sticky using JavaScript

Create a `script.js` file and add the following JavaScript code to make the navigation bar sticky:

  1. const header = document.getElementById("header");
  2.  
  3. window.addEventListener("scroll", () => {
  4. if (window.pageYOffset > 0) {
  5. header.classList.add("sticky");
  6. } else {
  7. header.classList.remove("sticky");
  8. }
  9. });

This code snippet listens for the scroll event on the window and toggles a «sticky» class on the header element based on the current scroll position.

4. Add the «sticky» class styling to your CSS file

Finally, update your `styles.css` file to include the «sticky» class styling:

  1. .sticky {
  2. position: fixed;
  3. top: 0;
  4. left: 0;
  5. width: 100%;
  6. z-index: 100;
  7. }

This CSS rule ensures that the header stays fixed at the top of the screen when the «sticky» class is applied.

Now, as you scroll down the page, the navigation bar will remain fixed at the top, providing easy access to your website's main sections.

We use cookies to improve your browsing experience. By continuing to use this website, you consent to our use of cookies. Learn More