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

Question

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!

This could be helpful http://stackoverflow.com/q/3898130/2887133 — DaniP, Sep 09 '16 at 15:14
Yeah, I've found that post... but I didn't found a good solution to use it. The sub-menu was flashing if you scroll down because the function was not clear enough. — Keyla Rainbow, Sep 09 '16 at 15:39

score 1 · Accepted Answer · edited May 23 '17 at 12:15

1

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

edited May 23 '17 at 12:15

Community

1
1

answered Sep 09 '16 at 16:03

DaniP

37,813
8
65
74

1

Thank you! That's exactly what I need! It works perfectly! – Keyla Rainbow Sep 09 '16 at 16:15

score 0 · Answer 2 · answered Sep 09 '16 at 16:10

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

Note:-Changing $(window).height() to window.innerHeight should be done because when the address bar is hidden an additional 60px are added to the window's height but using $(window).height() does not reflect this change, while using window.innerHeight does.

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

2 Answers2