How to Keep Navbar Menu Fixed on Scroll With HTML, CSS, and Javascript – Very Simple

Guys, I will explain How to Keep Navbar Menu Fixed on Scroll With HTML, CSS, and Javascript. It is effortless to do. You don’t have to be a techie person to do this. If you are a very beginner, you can do this too. Let’s get started.

How to Keep Navbar Menu Fixed on Scroll With HTML, CSS and Javascript-min

How to Keep Navbar Menu Fixed on Scroll With HTML, CSS, and Javascript (Method 1):

We will do this with HTML, CSS, and Javascript. If you are interested in doing this with the help of Jquery, you can do this too. I will simply discuss all of them. Let’s do it right now.

Select the div at first:
You have to select the div that you want to keep fixed while scrolling. It can be an ID or Class. But I prefer ID for now. In this tutorial, I will show you using an ID. So for now, I will use the id “nav” to make this div fixed. So I am using the default Bootstrap 4 menu element in my post to keep my menu fixed on scroll.

Here is my HTML File that I have used to make this menu fixed.

<nav id="nav" class="nav navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

</nav>

<style> .shrink { padding: 20px 10px; position: fixed; top: 0; width: 100%; transition: .8s all; padding: 12px; opacity: .95; } </style> var nav = document.getElementById(‘nav’); window.onscroll = function () { if(window.pageYOffset > 100){ //You can set it according to your need. nav.classList.add(“shrink”); }else{ nav.classList.remove(“shrink”); } }

 

Here is the entire code snippet to make sure that you get it. You can use it according to your need. I will now put the code below with explanation.

HTML Code: 

<nav id="nav" class="nav navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

</nav>

 

CSS Code: 

.shrink {
  padding: 20px 10px;
  position: fixed; 
  top: 0;
  width: 100%;
  transition: .8s all;
  padding: 12px;
  opacity: .95;
}

Javascript Code: 

var nav = document.getElementById('nav');

     window.onscroll = function () {
    if(window.pageYOffset > 100){ //You can set it according to your need. 
      nav.classList.add("shrink");
    }else{
            nav.classList.remove("shrink");
         }
      }

 

How to Keep Navbar Menu Fixed on Scroll With HTML, CSS, and Jquery (Method 2):

If you are interested in creating it using JQuery, It is up to you. Here is the Jquery code that you can use to keep navbar menu fixed on the scroll. Put the code snippet Below the jQuery file.

Javascript code for JQuery:

$(document).on("scroll", function(){
    if($(document).scrollTop() > 100){
      $(".navbar").addClass("shrink");
    } else {
      $(".navbar").removeClass("shrink");
    }
  });

The style.css code should be the same from the top.

CSS Code: 

.shrink {
    padding: 20px 10px;
    position: fixed; 
    top: 0;
    width: 100%;
    transition: .8s all;
    padding: 12px;
    opacity: .95;
  }

 

It is simple to do even if you are a beginner. But if you still have any problem to do, you can contact our developer team by LLN Service. They will help you to keep navbar menu fixed on the scroll with HTML, CSS, javascript or jQuery.

Navbar fixed top after scrolling:

It is just another search term of the same topic. You can apply the rule from the top to create it.

Navbar fixed top after scrolling bootstrap:

If you are using bootstrap, that means you are using jquery for sure. So you can apply the method 2 with jQuery. No matter if you use bootstrap or not. You can apply it with JQuery.

How to Keep Navbar Menu Fixed on Scroll With HTML, CSS and Javascript-minSticky div on scroll:

It is also another search term. You can keep sticky div on scroll using both methods. Either pure javascript or jQuery. They are the same. The only difference with the name.

Fixed header on scroll HTML:

I have checked the people are searching with this too. But maybe they are confused about how it works. With only HTML, it is not possible. You have to combine Javascript and jquery to get it done. Please use any of the methods which are suitable for you.

Make div fixed after scrolling:

haha. I also get it from the search patterns. It is the same too. You need to use method 1 or method 2 to get it done. If you want to make, any div fixed while scrolling, you can select any other div like “nav.” No matter which div you choose. You can set any div if you want. That’s all for today.

Other Resources:

W3 School: Navbar Menu Fix while Scrolling

LLN Team

About The Author : LLN Team

We are LLN Team promise you to provide you useful information about website and blog creation. We will focus on WordPress and other essential needs. Keep browsing Lets Learn Now. Cheers

Leave a Reply

Your email address will not be published.

Please post a relevant comment and make the conversion informative.