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

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

Read Also:  Laravel Auth Middleware Example Tutorial From Scratch

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

<h2>This is a header</h2>
<nav id="navigation">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact Us</li>
    <li>Tutorials</li>
    <li>Examples</li>
  </ul>
</nav>
<p>Welcome to our Blog for Step by step Learn.......</p>

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

Read Also:  Laravel Open link in new tab Example

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.