online-tutor

Bottom Notice

× Primary Teacher Exam Related Books And Suggestion - Click Here !

Top Ads

Bottom Notification

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


Close

1 Comments

Use Comment Box ! Write your thinking about this post and share with audience.

  1. Playtech Casinos in Arizona 2021 - Dr.MCD
    The best online https://deccasino.com/review/merit-casino/ casino games at Dr.MCD 출장마사지 poormansguidetocasinogambling If you prefer the traditional slot machines, wooricasinos.info or prefer games 1xbet korean with progressive jackpots, then

    ReplyDelete

Post a Comment

Use Comment Box ! Write your thinking about this post and share with audience.

Previous Post Next Post

Sponsord


Author sign up !

Sponsord

Help:

FAQs:

How to download any file from this website ?

You can download all the files on our site. We usually share the link of Google Drive from here you can securely and very quickly collect any PDF or all other files. One more thing to keep in mind is that this site does not post any kind of fake download, so wherever you see PDF download or file download, remember that you can download your desired PDF or other files from that post. Each download button has a timer attached. Basically, it takes some time for the files to be ready, so the download timer is given. There may be some automatic download timers, in which case there is nothing to be afraid of when you see the timer. There will be no accident when the timer runs out. Wait there with some of your precious time.

এই ওয়েবসাইট থেকে যেকোনো ফাইল কিভাবে ডাউনলোড করবেন ?

অনেকে আছেন যারা অযথা কমেন্ট করে জিজ্ঞাসা করেন কিভাবে ডাউনলোড করব তাদের উদ্দেশে বলে দেয় আমাদের এই সাইটের সকল ফাইল আপনি অবশ্যই ডাউনলোড করতে পারবেন । আমরা সাধারণত গুগোল ড্রাইভ এর লিংক শেয়ার করে থাকি এখান থেকে আপনি নিরাপদ এবং খুব দ্রুত যেকোনো পিডিএফ বা অন্যান্য সকল ফাইল সংগ্রহ করতে পারবেন । আর একটি কথা বলে রাখা দরকার এই সাইটটি কোন প্রকার ফেইক ডাউনলোড পোস্ট করে থাকে না সুতরাং যেখানে দেখবেন পিডিএফ ডাউনলোড বা ফাইল ডাউনলোডের কথা বলা আছে মনে রাখবেন আপনি অবশ্যই সেই পোষ্টটি থেকে আপনার কাংখিত পিডিএফ বা অন্যান্য ফাইল গুলো ডাউনলোড করে নিতে পারবেন । প্রতিটি ডাউনলোড বাটনে একটি টাইমার সংযুক্ত করা আছে । মূলত ফাইল গুলো প্রস্তুত হতে বেশ কিছুটা সময় লাগে সেকারণে ডাউনলোড টাইমার দেওয়া হয় । কিছু কিছু স্বয়ংক্রিয় ডাউনলোড টাইমার থাকতে পারে, সেক্ষেত্রে টাইমার দেখলে ভয় পাবার কিছু নেই টাইমার শেষ হলে কোন দুর্ঘটনা ঘটবে না আপনার মুল্যবান সময়ের কিছুটা দিয়ে সেখানে অপেক্ষা করুন টাইমার পুরোপুরি শেষ হলে ডাউনলোড বাটন পেয়ে যাবেন ।

Author sign up !

যারা বিভিন্ন বিষয়ের উপর লিখতে পছন্দ করেন এবং আপনার লিখিত সৃষ্টিকর্ম প্রকাশ করতে চাচ্ছেন তারা এই ওয়েবসাইটের একজন লেখক হিসেবে বিনামূল্যে যোগদান করতে পারেন । লেখক হিসেবে যোগদান করে আপনার লেখাগুলো এই ওয়েবসাইটে পোস্ট করুন । Author sign up !