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.
Useful tutorials for you :
How to place Adsense Ad below Post Title and within or in-middle of the Blogger post ⏩ How to make any widget Sticky in Blogger
Customization : Don't forget to Replace the Widget ID (all red text of the code) with your Menu ID. Check this How to Know The Widget ID.
So, just follow these steps :
Step 1 Sign-in to your Blogger Account then Go to Layout → Add a Gadget → HTML / Java Script 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"); //widget ID here
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:#032f37 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}</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.
Customization : Don't forget to Replace the Widget ID (all red text of above code) with your Menu ID.
And it has been done! Visit your site and see the changes
Tips: # Whenever you edit the Blogger template's HTML, don’t forget to keep a Backup your existing blogger template, so that if something goes wrong, you can Restore the template.
If you found this post useful, please share it because Sharing is Caring.
Reblog https://improving-knowledge.blogspot.com/2017/08/blogger-sticky-navigation-which-will-be-hidden-when-scroll-down-and-appear-on-scroll-up.html
Step 1 Sign-in to your Blogger Account then Go to Layout → Add a Gadget → HTML / Java Script 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"); //widget ID here
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:#032f37 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}</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.
Customization : Don't forget to Replace the Widget ID (all red text of above code) with your Menu ID.
And it has been done! Visit your site and see the changes
Tips: # Whenever you edit the Blogger template's HTML, don’t forget to keep a Backup your existing blogger template, so that if something goes wrong, you can Restore the template.
If you found this post useful, please share it because Sharing is Caring.
Reblog https://improving-knowledge.blogspot.com/2017/08/blogger-sticky-navigation-which-will-be-hidden-when-scroll-down-and-appear-on-scroll-up.html
Post A Comment: