Convert simple Blogger menu to sticky

navigation

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.

sticky menu

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. 


EmoticonEmoticon