Question

我想要做两件事 - 在滚动时更改页面的部分（在下一部分向下滚动，在向上滚动之前），如this jsFiddle，并在scroll down > 100px时淡入菜单。问题是，在这两种情况下，我都应该使用scrollTop()方法，该方法始终返回0。例如，当我尝试淡入菜单背景时：

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

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

当我尝试向下滚动时，菜单不会出现。这是我的主要标记：

<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>

我有与jsFiddle相同的代码，但当我尝试滚动时没有任何事情发生（滚动根本不起作用！）并且在控制台中没有错误。

我猜风格会导致这个问题（不确定，但无论如何）。我将full-screen-element类添加到每个元素以使它们达到100％高度：

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

我也尝试使用jQuery Mouse Wheel，但同样存在问题。

Answer 1

终于找到了，问题是因为body元素有overflow: hidden，将其设置为visible并且有效

jquery scrollTop不起作用（总是返回0）

1 个答案: