Keyla Rainbow Keyla Rainbow - 1 year ago 61
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.
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) {

$(".sidemenu").css("top", "92px");

} else {
$(".sidemenu").css("top", "170px");


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

Answer Source

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:

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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download