How to create a navigation bar on scroll

JavaScript Project

to create a navigation bar that appears on scroll using javascript, you can listen for scroll events and add or remove a css class to toggle the visibility of the navigation bar. here's an example:

1. set up your html structure:

<!Doctype html>
<html>
<head>
  <title>scroll navigation example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="navigation">
    <nav>
      <ul>
        <li><a href="#home">home</a></li>
        <li><a href="#about">about</a></li>
        <li><a href="#services">services</a></li>
        <li><a href="#contact">contact</a></li>
      </ul>
    </nav>
  </header>
  <div id="content">
    <!-- your website content goes here -->
    <section id="home">
      <h1>welcome to my website</h1>
    </section>
    <section id="about">
      <h2>about</h2>
      <p>this is some information about me.</p>
    </section>
    <section id="services">
      <h2>services</h2>
      <p>these are the services i offer.</p>
    </section>
    <section id="contact">
      <h2>contact</h2>
      <p>get in touch with me.</p>
    </section>
  </div>

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

2. create a css file (styles.css) to style the navigation bar and set its initial visibility:

css
.navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.navigation.scrolled {
  transform: translatey(-100%);
}

.navigation ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation ul li {
  margin: 0 10px;
}

.navigation ul li a {
  color: #333;
  text-decoration: none;
}

#content {
  padding-top: 100px; /* add padding to content to prevent it from being overlapped by the navigation */
}

3. now, create a javascript file (script.js) to handle the scroll event and toggle the css class for the navigation bar:

javascript
document.addeventlistener('domcontentloaded', function () {
  const navigation = document.queryselector('.navigation');
  let scrolled = false;

  function handlescroll() {
    if (window.scrolly > 100 && !scrolled) {
      navigation.classlist.add('scrolled');
      scrolled = true;
    } else if (window.scrolly <= 100 && scrolled) {
      navigation.classlist.remove('scrolled');
      scrolled = false;
    }
  }

  // add scroll event listener
  window.addeventlistener('scroll', handlescroll);
});

4. place all the files (html, css, and js) in the same folder, and open the html file in a web browser. as you scroll down the page, the navigation bar will appear and disappear based on the scroll position.

note: adjust the `100` value in the javascript code (`window.scrolly > 100`) to control the scroll threshold at which the navigation bar should appear. you can modify other css properties to style the navigation bar according to your needs.

Output:

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc

facebook.com/pythontpoint

twitter.com/pythontpoint

instagram.com/pythontpoint

PreviousNext

Join our newsletter for the latest updates.

About us

pythontpoint.org : The best online tutorial to learn Python, Machine Learning, Deep Learning, Data Science, Power BI, SQL & Java.
We Provide best Academic training, Corporate training, Project & Internship.

Our Services

Corporate & Academic Training
Website Designing
Website Development
Digital Marketing
Project & Thesis

Contact Us

Plot No-741, 2nd Floor, Jayadev Vihar, 751013, Bhubaneswar, Odisha
Call :
0674-2361252
Mail : info@silansoftware.com
Contact Us
Privacy Policy

Our Courses

Our Tutorials