Convert simple Blogger menu to sticky
sticky nav menu
Hi I have
share with you the trick that how we can convert out blogger widget into sticky
widget but today I am going to share a trick that we would make our current
blogger menu into sticky menu. Generally the purpose of this trick is to make
more easier blogger navigation for blog visitors. When a visitors read an
article then s/he may goes to bottom of the article page. So if s/he wants to
enter into another category then again s/he to go at the top of the page. So if
your blog menu sticky then the menu will scroll down with the moving of mouse
pointer. As a result your blog visitors don't have to go at the top of the page
again and again. So this is very effective to make your blog visitors stay
longer with your blog. The coding is made with pure CSS and very easy to add
into your blog.
Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard
Step 2 Now click on -> Template -> Edit HTML
Step 3 Now Find </body> by pressing Ctrl + F
Step 4 Now paste the below code above/before </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
/ / Determine the element that is made sticky. nav
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
/ / condition if discroll it will always be on the menu, and vice versa
if (scrollTop > stickyNavTop) {
$('.nav ').css({ 'position': 'fixed', 'top':0, 'left':0, 'z-index':9999 });
} else {
$('.nav ').css({ 'position': 'relative' });
}
};
/ / Run function
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
Step
5 And save your
template.
Customization
I have explained this code with .nav but your menu coding may differ. Suppose
responsivenav, navbar etc. so replace with those nav words.
If you face any problem
then feel free to contact with me.
2 comments