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

http://davidwalsh.name/javascript-debounce-function


Comments

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

python - Mongodb How to add addtional information when aggregating? -

java - Incorrect order of records in M-M relationship in hibernate -