0

I am trying to create an effect similar to "Show div on scrollDown after 800px" answered by apaul34208 in this thread.

The problem is that I am also using this parallax effect on my website, which disables the normal window scroll, so the entire website is scrolling inside a certain div (.parallax) with 100% height. This also disables the desired effect.

Since the div I want to hide or show is supposed to be in fixed position it has to be located outside the scrolling .parallax div, but read the scroll position of the same div.

I have also tried solution from this thread, but I can't seem to make it work.

Right now I am using this script:

$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
    $('.bottomMenu').fadeIn();
} else {
    $('.bottomMenu').fadeOut();
}
});

which is working fine on non-parallax pages except for that the fixed div is displayed when page loads on top, disappears when scrolling down 1 px only to appear again after scrolling down 800 px.

But I guess I can't use scrollTop in what I am trying to achieve. Any suggestions?

Community
  • 1
  • 1
flegon
  • 1
  • 2

1 Answers1

0

Have you tried:

    .bottomMenu {
        display: none;
     }

If not, it will be shown when the page is loaded (the scroll function is not fired because you haven't scrolled yet) and hidden if you start scrolling because the if statement is evaluated as false because the y position is <800 and $('.bottomMenu').fadeOut(); runs.

Emil Haugberg van Veen
  • 26
  • 3
  • Thank you, that solves the final issue. However, the problem with identifying the scroll position of the .parallax div persists. – flegon Jun 05 '16 at 06:09