skip
Thursday , January 26 2023

Hide Navbar When Scroll Down丨Show Navbar When Scroll Top

How to hide a navbar when the user starts to scroll down ?

Just using 3 following step

  • Step – 01. Necessary CSS Code
  • Step – 02. HTML
  • Step – 03. Few Code Of Java Script

CSS Code for Hide Navbar when scroll top or down

#navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

HTML Code for Hide Navbar when scroll down or top

<div id=”navbar”>
  <a href=”#home”>Home</a>
  <a href=”#news”>News</a>
  <a href=”#contact”>Contact</a>
</div>

Java Script Code for Hide Navbar when scroll down or top

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById(“navbar”).style.top = “0”;
  } else {
    document.getElementById(“navbar”).style.top = “-50px”;
  }
  prevScrollpos = currentScrollPos;
}
</script>

Already If You Have Fixed Navbar You Can Try Only Java Script

  • Just Change The Following Class Name With Your Navbar Class – navbar

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById(“navbar“).style.top = “0”;
  } else {
    document.getElementById(“navbar“).style.top = “-50px”;
  }
  prevScrollpos = currentScrollPos;
}

Check Also

Pure Css Notification Bell Hover – NO Java Script Required

How To Make Css Notification Bell Hover ? without any Java Script Here is two …

Start Countdown When I Click On Download Button Full Coding

Start Countdown When I Click On Download Button 100% Working You can use this code …

Responsive Bottom Sticky Footer Ads For Blogger or WordPress

Responsive Bottom Sticky Footer Ads Widget For Blogger or WordPress How Set up Sticky Footer …

Star Symbols Name HTML and CSS Code – HTML Symbols, Entities and Codes

Star Symbols HTML Code , CSS Code Name And Description Need the copyright sign hypertext …

How To Make Left Fixed Ads Section For Desktop Preview Only – Full Guideline

How To Include Left Fixed Ads Section For Desktop Preview For Blogger Or WordPress Site. …

How To Make A Slider By Using CSS – Full Guideline

What is CSS coding ?  CSS stands for Cascading Style Sheets. It is the coding …

JAVA Script Countdown Timer Download Button Full working script

⇓ Countdown Timer Download Button What is Countdown Timer Download Button ? ◼️ When you have …

Sahifa new version wordpress theme free download

Sahifa – Responsive WordPress News, Magazine and Blog Theme Sahifa is one of the most …

0 0 votes
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
একজন লেখক হিসেবে এই সাইটে জয়েন করতে চান ?
আপনার লেখা পোষ্ট পাবলিশ করুন এবং সেই পোষ্ট থেকে অর্থ উপার্জন করুন
See More & Sign Up !