0

I have a website that has a sticky footer at the bottom, and I also have a horizontal navigation bar that sites on top of the footer when you are scrolled to the bottom of the page.

I implemented lazy loading of posts on my site, and now, every time a new post loads, the footer jumps back down to the bottom of the page, but my horizontal navigation menu does not, until the moment I scroll.

I tried doing a setTimeout around the resize function, but that didn't do the trick (but, I may have done that wrong).

When at the complete bottom of the page, the bottom nav and footer look great. I just need it to trigger the replacement of the horizontal navigation menu to the bottom of the screen while loading new posts, then, when at the complete bottom of the screen, have the horizontal navigation menu sit on top of the footer, which is currently is doing.

Here is the JS controlling the placement of the nav menu (#sticky-bottom):

var menuResize = function() {  
$j(window).scroll(function() {
   if($j(window).scrollTop() + $j(window).height() > $j(document).height() - 140) {
        $j('#sticky-bottom').css("bottom", "90px");
   }else{
        $j('#sticky-bottom').css("bottom", "14px");
   }
});
};
$j(window).resize(menuResize).ready(menuResize);

And, here is the CSS for the nav menu:

#sticky-bottom{
position: fixed;
bottom: 14px;
left: 0;
right: 0;
height: 68px;
}

Any help is greatly appreciated! thanks!

gamehendgeVA
  • 149
  • 1
  • 3
  • 15
  • 1
    you could 'watch' the body height for changes – mrdeleon Apr 28 '17 at 19:05
  • try to use `window.on("load",function(menuResize ) ` that way it will be called only after all the items in the page have loaded – Mihai T Apr 28 '17 at 19:07
  • @Mihai T -- the lazy loading paradigm invalidates that solution as new posts will load whenever user scrolls page – McHat Apr 28 '17 at 19:19
  • I tried the @Mihai solution, but it didn't work (like McHat said, due to lazy loading of the new post). – gamehendgeVA Apr 28 '17 at 19:25
  • @mrdeleon, can you point me in the right direction with how to use body height changes to trigger the navigation placement? – gamehendgeVA Apr 28 '17 at 19:25
  • @gamehendgeVA here is an answer from a previous question http://stackoverflow.com/a/14901150/327238 – mrdeleon Apr 28 '17 at 19:30
  • @mrdeleon I can get the "body height changed" alert to work, but not sure how to insert the menuResize function into that... And, I tried $j(window).setInterval(menuResize, 200); which works until the bottom of the page, then the nav menu no longer goes on top of the footer. – gamehendgeVA Apr 28 '17 at 19:42
  • @mrdeleon - I got it thanks to you! Basically, I just had to put $j('#sticky-bottom').css("bottom", "14px"); where the alert of "body height changed" was in this code http://stackoverflow.com/questions/14866775/detect-document-height-change/14901150#14901150 . Thanks so much! – gamehendgeVA Apr 28 '17 at 19:57
  • does this not work? onElementHeightChange(document.body, function(){ alert('Body height changed'); menuResize(); }); – mrdeleon Apr 28 '17 at 19:59
  • @mrdeleon - no, I tried that first and that didn't work... maybe it was a scope issue or something. Just changing the CSS within onElementHeightChange did the trick. – gamehendgeVA Apr 28 '17 at 20:01

0 Answers0