DEV Community

loading...
Cover image for The animated sticky navigation bar on scroll | Fixed Navbar on Scroll

The animated sticky navigation bar on scroll | Fixed Navbar on Scroll

stackfindover profile image Stackfindover Updated on ・2 min read

Hello, guys in this tutorial we will create an animated sticky navigation bar on scroll using HTML CSS & JavaScript

Common Query

  1. how to create a fixed navbar
  2. how to add class on scroll
  3. how to create a sticky navigation bar on scroll

Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to create an animated sticky navigation bar on scroll using HTML CSS & JavaScript

First, we need to create three files index.html and style.css then we need to do code for it.

Fixed Navbar Step:1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Animated Sticky Nav</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
</head>
<body>
  <header>
    <h1>Quizzz</h1>
  </header>
  <nav id="navbar">
    <ul class="menu-list">
      <li class="logo"><a href="#"><img src="quiz-logo.png" alt="logo"></a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">FAQ's</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
  <script>
    const nav = document.querySelector("#navbar");
    const NavTop = nav.offsetTop;

    function fixnavbar(){
      if(window.scrollY >= NavTop){
        document.body.style.paddingTop = nav.offsetHeight + "px";
        document.body.classList.add("fixed-nav");
      }else {
        document.body.style.paddingTop = 0;
        document.body.classList.remove("fixed-nav");
      }
    }
    window.addEventListener("scroll", fixnavbar);
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Fixed Navbar Step:2

Then we need to add code for style.css which code I provide in the below screen.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Oswald', sans-serif;
}
body {
  background: #f2f4f6;
  height: 200vh;
}
header {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbb833;
  height: 25vh;
}
header > h1 {
  color: #fff;
  font-size: 100px;
  text-shadow: 3px 5px 0 rgb(0 0 0 / 20%);
}
nav#navbar {
  background: #3f3d56;
  top: 0;
  position: relative;
  width: 100%;
  transition: all 0.5s linear;
  z-index: 1;
}
ul.menu-list {
  display: flex;
  list-style: none;
}
ul.menu-list li {
  display: flex;
  flex: 1;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
}
ul.menu-list li.logo {
  max-width: 0;
  overflow: hidden;
  background: #fff;
  transition: all 0.5s linear;
}
.logo > a > img {
  max-width: 80px;
}
ul.menu-list li > a {
  text-decoration: unset;
  display: flex;
  color: #fff;
  transition: 0.2s linar;
  text-transform: uppercase;
}
body.fixed-nav nav#navbar {
  position: fixed;
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}
body.fixed-nav li.logo {
  max-width: 300px;
}
Enter fullscreen mode Exit fullscreen mode

Fixed Navbar Video Output:

Fixed Navbar Codepen Output:

Discussion (1)

Collapse
ra1nbow1 profile image
Matvey Romanov

Pretty useful, thanks

Forem Open with the Forem app