CODEWITHSUNDEEP
javascriptjqueryscroll
user8506374
user8506374

Reputation:

jquery scrollTop doesn't work (always returns 0)

I want to do 2 things -- change section of page on scroll (on scroll down next section appears, on scroll up previous) like this jsFiddle, and fade in menu when scroll down > 100px. The problem is that in both situations, I should use the scrollTop() method, which always returns 0. For example, when I try to fade in the menu background:

$(function() {
$('body').on('scroll', function () {

    if ($(this).scrollTop() > 100) {
      $('.hidden-white-bg').fadeIn();
    }else{
      $('.hidden-white-bg').fadeOut();
    }
});
});

When I try to scroll down, the menu doesn't appear. Here's my main markup:

<div id="landing-wrapper" class="full-screen-element">
     <section id="main-sectcion" class="full-screen-element">....</section>
     <section id="all-possible" class="full-screen-element">....</section>
     <section id="location" class="full-screen-element">....</section>
     <section id="everything-provide" class="full-screen-element">....</section>
     <section id="main-slider" class="full-screen-element">....</section>
</div>

I have the same code as in that jsFiddle, but when I try to scroll nothing happens (scroll doesn't work at all!) and no error in console.

I guess styles causes this problem (not sure, but anyway). I added the full-screen-element class to each element to make them 100% height:

.full-screen-element{
    height:100%;
    min-height:100%;
    height:auto !important;
}

I also tried to use jQuery Mouse Wheel but same problem there.

Upvotes: 1

Views: 102

Answers (1)

user8506374
user8506374

Reputation:

finally found out, the problem was because body element has overflow: hidden, set it to visible and it works

Upvotes: 2

Related Questions