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:  Angular 6 JSON Array Merge into one array

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:  Simple Vue.js 2 CRUD application

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.

Read Also:  OneDrive Move copy create delete file folder

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  WordPress Plugin Activation Dependency Check
  2. Read Also:  Fixed Sticky Header scrolling in JQuery Example
  3. Read Also:  Laravel Bootstrap Toggle switch Update DB field using Ajax
  4. Read Also:  Create a Fixed Sticky Navigation Menu Bar
  5. Read Also:  Laravel 5.7 Get Current User Details using Controller and blade
  6. Read Also:  Different Types of SQL Keys in Database with Example
  7. Read Also:  country state city drop down list using JavaScript
  8. Read Also:  Filter - Limit the length of string using AngularJS
  9. Read Also:  Laravel Email Verification Script Example
  10. Read Also:  Create a Fixed Sticky Navigation Menu Bar