我想做两件事——在滚动时更改页面部分(向下滚动时出现下一部分,向上滚动时出现上一节),如 this jsFiddle , 并在 向下滚动 > 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但同样的问题。
最佳答案
终于找到了,问题是因为body
元素有overflow: hidden
,设置为visible
就可以了
关于javascript - jquery scrollTop 不起作用(总是返回 0),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46159030/