jquery sticky menu and link scroll to anchor

jquery-sticky-menu-and-scroll-to-anchor.md

JQuery intellectual sticky menu which know how to scrolling when clicking an anchor link from sticky and static menu status

Html of link like this (you can use # instead of #lnk_):

<a class="alio-btn" href="#lnk_order-form">ORDER NOW</a>

The html structure of my navmenu is like this:

<header class="header">
   <div class="header-top">...</div>
   <div class="navbar-fluid"></div><!-- fix to not jumping menu when it becoming sticky -->
   <nav class="navbar sticky">
       ...
       <div class="col-xs-12">
           <div id="primary-navbar-collapse" class="collapse navbar-collapse">
               <ul id="menu-primary" class="alio-navbar">
                   <li><a href="/#lnk_about">About</a></li>
                   ...
               </ul>
           </div>
       </div>
       ...
   </nav>
   ...
</header>
...

CSS for sticky menu:

.navbar.sticky {
   position: fixed;
   top: 0;
   z-index: 1000;
}

Scripts.js file:

// Sticky menu and anchor scroll
var $nav = $('.navbar'),
    barSpace = ($('body').hasClass('admin-bar') && document.documentElement.offsetWidth > 600) ? $('#wpadminbar').outerHeight() - 1 : 0,
    $navbarFluid = $('.navbar-fluid'),
    navStaticHeight = $nav.outerHeight();

function stickyNav(){
    if ($(window).scrollTop() >= $('.header-top').outerHeight() + navStaticHeight + 150) {
        $nav.addClass('sticky');
        $navbarFluid.height(navStaticHeight + 20); // 20 - it is paddings of .navbar
    } else {
        $nav.removeClass('sticky');
        $navbarFluid.height(0);
    }
}

stickyNav();

// run it again every time you scroll
$(window).scroll(function() {
    stickyNav();
});

// Scrolling to anchor
jQuery(window).bind("load", function() {
    var hash =  jQuery(location).attr('hash');

    // Get the sticky navbar height, to do so, I need to clone it since it's invisible
    var $stickyFake = $nav.clone().addClass('sticky fake').appendTo($('body')).css({
        'position':'absolute',
        'top':-10000
    });

    $nav.data('hSticky', $stickyFake.outerHeight());
    $stickyFake.remove();

    if(hash != '') {
        jQuery('html, body').stop().animate({
            scrollTop: jQuery(hash).offset().top - $nav.data('hSticky') - 20 - barSpace
        }, 1000);
    }
});

$('a[href*="#lnk_"]').bind("click", function(e) {
    var anchor = $(this);
    var id = anchor.attr('href').split('#');
    id = '#' + id[id.length - 1];

    // if opened mobile menu
    var parentUl = $(this).parents('ul.alio-navbar'),
        parentNavbar = $(this).parents('.navbar'),
        scrollPlace;
    if (parentUl && parentNavbar && !$(parentNavbar[0]).is('.sticky') && document.documentElement.offsetWidth < 767) {
        scrollPlace = $(id).offset().top - $(parentNavbar[0]).outerHeight() - 20 - barSpace;
        console.log('scrollPlace', scrollPlace);
    } else {
        scrollPlace = $(id).offset().top - $nav.data('hSticky') - 20 - barSpace;
        console.log('scrollPlace1', scrollPlace);
    }

    $('html, body').stop().animate({
        scrollTop: scrollPlace
     }, 1000);
    e.preventDefault();
});