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

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

***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 1. how to add class on scroll 1. how to create a sticky navigation bar on...

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>

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;
}

Fixed Navbar Output: Watch Now

We hope you liked this article (The animated sticky navigation bar on scroll | Fixed Navbar on Scroll). You should definitely keep your thoughts about it in the comment below and share this article with your friends.

html css navbar fixed navbar fixed navbar on scroll

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Sticky and Fixed Scroll with Nav Menu using HTML CSS - Sticky Navbar After Scroll

Sticky and Fixed Scroll with Nav Menu using HTML CSS - Sticky Navbar After Scroll

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

Sidebar Menu Using Only HTML and CSS | Side Navigation BarHello friends, Today in this video you'll learn how to create a Sidebar Menu using HTML and CSS onl...

How to Create on Scroll Fixed / Sticky Navbar using HTML, CSS & JavaScript

In this video, We will show you how you can easily create on scroll fixed navigation bar / navbar / sticky navbar using HTML, CSS & JavaScript.

Navbar with HTML, CSS, and JavaScript - How to Create Creative Navbar (HTML/CSS/JavaScript)

In this tutorial, we will build a Creative Navbar. The project will be created based on HTML, CSS, and JavaScript

Sticky Navigation Bar on Scroll using HTML CSS Fixed Navbar on Scroll

Sticky Navigation Bar on Scroll using HTML CSS | Fixed Navbar on Scroll