Keyla Rainbow Keyla Rainbow - 3 months ago 10
jQuery Question

Sub-menu fadeIn at the top of the page and fadeOut at the end

I have a sub-menu, that fadeIn at the top of a page if you scroll 150px. If you higher than the 150px it fadeOut.

That's works fine. Now I want that the sub-menu FadeOut at the end of the side, too.
Like:
FadeIn between 150px of the top and 150px before the page ends. Outside this area: FadeOut.

Here is my jQuery-Code:

function scrollSide($) {

if ($(window).width() >= 768) {
/*menu scroll*/

$(window).scroll(function () {
var scroll = $(window).scrollTop();

if (scroll >= 150) {

$("#navbar-example").fadeIn("easing");
$(".sidemenu").css("top", "92px");

} else {
$(".sidemenu").css("top", "170px");
$("#navbar-example").fadeOut("easing");

}
});
}
}


I need a if statement for the situation between the top of the page and the end of the page.
Thanks a lot!

Answer

You will need to add another condition to your if statement, checking if the user has scrolled to the bottom or not.

Based on this question:

Check if a user has scrolled to the bottom

You can do this:

$(window).scroll(function(){
    var st = $(window).scrollTop(),
        wh = $(window).height(),
      dh = $(document).height();
  if(st >= 150 && st+wh <= dh-150){
    $('yourdiv').fadeIn();
  } else {
    $('yourdiv').fadeOut();
  }
})

FIDDLE DEMO