Create Sticky Navigation Bar Using CSS3 And Javascript

Today, We want to share with you Create Sticky Navigation Bar Using CSS3 and Javascript.In this post we will show you How to Sticky Navigation Bar on Scroll Using Javascript?, hear for bootstrap sticky header on scroll we will give you demo and example for implement.In this post, we will learn about Create an Animated Sticky Navigation Menu with Vanilla JavaScript with an example.

Create Sticky Navigation Bar Using CSS3 and Javascript

Contents

There are the Following The simple About How to Create a Sticky Navigation with CSS3 & jQuery Full Information With Example and source code.

As I will cover this Post with live Working example to develop Create a Sticky menu with CSS and JavaScript, so the How To Create an On Scroll Fixed Header is used for this example is following below.

HTML Source Code

This is a header

Welcome to our Blog for Step by step Learn.......

const nav = document.querySelector('#navigation');
const topBarEx = nav.offsetTop;


function liveMenuBarDemo() { 
  console.log('topBarEx = ' + topBarEx);
  console.log('scrollY = ' + window.scrollY);
}

window.addEventListener('scroll', liveMenuBarDemo);

function liveMenuBarDemo() {
  if (window.scrollY >= topBarEx) {
    document.body.classList.add('fixed-nav');
  } else {
    document.body.classList.remove('fixed-nav');
  }
}

CSS Code

nav {
  width: 100%;
  background-color: black;
  text-align: center;
  margin: 0 auto;
}

/* applied after scroll height reached */
.fixed-nav nav {
  position: fixed;
  top:0;
  z-index: 1;
}

The fixed navigation is activated

const nav = document.querySelector('#navigation');
const topBarEx = nav.offsetTop;

function liveMenuBarDemo() {
  console.log('topBarEx = ' + topBarEx);
  console.log('scrollY = ' + window.scrollY);

  if (window.scrollY >= topBarEx) {
    // nav offsetHeight = height of nav
    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', liveMenuBarDemo);

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about How To Create an On Scroll Fixed Header.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Create Sticky Navigation Bar Using CSS3 and Javascript