sticky nav doesnt stick untill scroll is completed

Question

I have read a few articles regarding this problem but I am unable to find a solution. I know that on mobile devices fixed positioning often is disabled and that when you scroll on ipad and other devices actions are not fired until the scroll is completed.

My situation is that I have a sticky navigation that does not stick until the page stops moving and the scroll is completed. So if you scroll the nav past the top of the page it continues up and out of site, but once the scrolling stops it then snaps into place at the top of the page like I want. I am using grand sticky plug in http://stickyjs.com/ .

Can anyone advice me on how to make the nav stick to top once it reaches the top? is http://iscrolljs.com/ a solution?

Answer 1

HTML

<nav>
.............
</nav>

CSS

.fixed-nav{
position:fixed;
z-index:9999;
}

JS

$(document).on('scroll',function(){
    var toTop = $('body').scrollTop();
    if (countScroll > offset) {
        $('nav').addClass('fixed-nav');
    } else {
        $('nav').removeClass('fixed-nav');
    }
    e.preventDefault();
});