How I Made My Blogger Menu Bar Sticky

Change Any normal Navigation bar to a Sticky Navigation Bar with this guide. What is the benefits of this? Your website or blog visitors doesn't have to scroll back to the top to select different topic or category.

After following the steps of this post, your current Blogger navigation bar or menu bar become sticky which will be hidden while scrolling down and appear on scroll up.

Step 1 ⏩ Sign-in to your Blogger Account then Go to Layout → Add a Gadget → HTML / Javascript and paste the following code (It is recommended to ad this Gadget at the bottom area of your layout) :- 

<script>
//<![CDATA[
bs_makeSticky("header-navigation");
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}}}
//]]>
</script>
<style>.bs_sticking {background:#ffffff !important; position:fixed !important; display: inline;
float: none; position: fixed; top: 0px; left: 0px;
right: 0px; z-index: 999; width:100%;} </style> 

Step 2 ⏩ The above code will make your navigation menu bar sticky. Now below the above code Paste the following code for Scrolling effect. 

<script>
//<![CDATA[
$(function(){
var lastScrollTop = 0, delta = 5;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop){
// downscroll code
$("#header-navigation").css({top:'-50px'})
.hover(function(){$("#header").css({top: '0px'})})
} else {
// upscroll code
$("#header-navigation").css({top:'0px'});
}
lastScrollTop = st;
});});
//]]>
</script>

Step 3 ⏩ Now click on Save button and then Save Arrangement of your Layout.

That's It and don't forget to REPLACE header-navigation the with your Menu ID.