addClass after timeout when user scrolls to bottom of page

Question

I have a jQuery/javascript code here on which i would like to set a timer.

$(window).scroll(function(){
  var scroll = $(window).scrollTop();
  var sheight = $(window).height();
  var dheight = $(document).height();

  if (scroll+sheight == dheight) {
    $(".footer").addClass('footer-show-all');
  } else {
    $(".footer").removeClass('footer-show-all');
  }
}, 500);

The code itself works! it shows only 20px of my footer when scrolling in general and shows All when you reach the bottom. But the bottom seems to come up too fast. So why does this timer not work?

---

---

Also I have my page in three different sections, (header, main and footer). Every thing works well in my page except for one part... My content slides over my menu. but i want my menu to be in front at all times.

jsFiddle

Thanks in advance for your help and please don't bash me too much.. Still learning here!

Answer 1

So why does this timer not work?

Because this is not a timer, and is not valid code, even if no error appears. jQuery's .scroll() does not have a delay parameter.

That delay can either be added to your CSS:

.footer-show-all {
    /* keep your existing styles here */
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
}

Demo

---

Or to your JS, using a setTimeout :

var timer;

$(window).scroll(function(){
    clearTimeout(timer); // Will avoid launching tons of timers every time you scroll
    timer = setTimeout(function(){
        var scroll = $(window).scrollTop(),
            sheight = $(window).height(),
            dheight = $(document).height();
        $(".footer").toggleClass('footer-show-all', (scroll+sheight == dheight));
    }, 500);
});

Demo

---

My content slides over my menu.

That's because your #header has a z-index of -10, and your content, 10. If you want your menu to stay on top, either the whole header has to be on top, or the menu has to be outside of the header, and have a z-index of more than 10.