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.

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.

Also Read This πŸ‘‰   Create a Fixed Sticky Navigation Menu Bar

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

Free Live Chat for Any Issue

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 :

Also Read This πŸ‘‰   php remove non numeric - How to remove non-alphanumeric characters in PHP stirng?

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.

Rate this post