CODEWITHSUNDEEP
jqueryhtmlcss
Keyla Rainbow
Keyla Rainbow

Reputation: 53

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!

Upvotes: 1

Views: 52

Answers (2)

Parth Raval
Parth Raval

Reputation: 4423

$(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.

Upvotes: 0

DaniP
DaniP

Reputation: 38252

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

Upvotes: 1

Related Questions