css - jQuery sticky navigation not animating back quickly enough -
i've put "sticky navigation" using jquery , css. navigation animates , slides down top of screen once user has scrolled past point. works fine.
what want have animate , scroll out of sight when user scrolls past same point @ navigation slid down. once top of page navigation should there @ top normal. half working, navigation doesn't animate out of sight until user right @ top of page, ruining illusion.
what need correctly animate out of sight on scroll up?
here's jquery:
$(document).ready(function() { var nav = $(".header-main"); var sticky_navigation_offset_top = 100; $(window).scroll(function() { var scroll_top = $(window).scrolltop(); // our current vertical position top if (scroll_top > sticky_navigation_offset_top) { if (!nav.hasclass('header-main-sticky')) { nav.addclass("header-main-sticky").css({ top: '-100px' }).stop().animate({ top: '0px' }, 500); } } else { if (nav.hasclass('header-main-sticky')) { nav.stop().animate({ top: '-100px' }, 500, function() { nav.removeclass("header-main-sticky").css({ top: '0px' }); }); } } }); });
i recommend changing part:
if (nav.hasclass('header-main-sticky')) { nav.stop().animate({top: '-100px'}, 500, function() { nav.removeclass("header-main-sticky").css({ top: '0px' }); }); } to this:
if (nav.hasclass('header-main-sticky')) { nav.removeclass("header-main-sticky").css({ top: '0px' }); } $(document).ready(function() { var nav = $(".header-main"); var sticky_navigation_offset_top = 80; $(window).scroll(function() { var scroll_top = $(window).scrolltop(); // our current vertical position top if (scroll_top > sticky_navigation_offset_top) { if (!nav.hasclass('header-main-sticky')) { nav.addclass("header-main-sticky").css({ top: '-100px' }).stop().animate({ top: '0px' }, 500); } } else { if (nav.hasclass('header-main-sticky')) { nav.removeclass("header-main-sticky").css({ top: '0px' }); } } }); });.header-main { height: 80px; background-color: #808080; } .header-main-sticky { position: fixed; width: 100%; top: 0; z-index: 9000; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="header-main"> </div> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p> <p>scroll down</p>
Comments
Post a Comment