javascript - Display div when at bottom of page -
right have made footer appear when scroll , hide when scroll down. how make appear when @ bottom of page?
https://jsfiddle.net/48az3u64/
// hide footer on on scroll down var didscroll; var lastscrolltop = 0; var delta = 5; var navbarheight = $('footer').outerheight(); $(window).scroll(function(event){ didscroll = true; }); setinterval(function() { if (didscroll) { hasscrolled(); didscroll = false; } }, 250); function hasscrolled() { var st = $(this).scrolltop(); // make sure scroll more delta if(math.abs(lastscrolltop - st) <= delta) return; if (st > lastscrolltop && st > navbarheight){ $('footer').removeclass('nav-up').addclass('nav-down'); } else { if(st + $(window).height() < $(document).height()) { $('footer').removeclass('nav-down').addclass('nav-up'); } } lastscrolltop = st; }
see fiddle https://jsfiddle.net/48az3u64/9/
i added function isbottom() found post how know scroll bar has reached bottom of page
function isbottom() { return $(window).scrolltop() == ($(document).height() - $(window).height()); } to add nav-up class when scroll, , disable timer.
i suggest not use timer kind of thing, since processing function every quarter of seconds if there haven't been scroll. should call hasscrolled() directly in scroll event , use debounce function not fire much. here link more info on debounce
Comments
Post a Comment