Posted inCSS / JavaScript / jQuery

fixed navigation bar after scroll – How to Create a Fixed Navigation Bar?

fixed navigation bar after scroll – A fixed navigation bar, also referred to as a “sticky” navigation bar, is a toolbar that stays in place while the user is scrolling the web page.

fixed navigation bar after scroll

navbar and i will need to use the same classname in our JQuery code later. Build a Fixed Top Navigation that Disappears as Users Scroll

Navigation bar fixed after scroll

window.onscroll = changePos;

function changePos() {
    var header = document.getElementById("header");
    if (window.pageYOffset > 70) { = "absolute"; = pageYOffset + "px";
    } else { = ""; = "";

html how to ensure that the header always on top

#header {
  position: fixed;

#content {
  margin-top: 100px;

stick menu bar in css

z-index works pretty much like a layer: the higher the z-index value, the greater it will allow the navigation tag to stay on top of other tags.

.navigation {
   /* fixed keyword is fine too */
   position: sticky;
   top: 0;
   z-index: 100;

Don’t Miss : Create A Fixed Sticky Navigation Menu Bar

I hope you get an idea about fixed navigation bar after scroll.
I would like to have feedback on my
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype