[英]jquery scrollTop doesn't work (always returns 0)
我想做两件事-像这样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,但那里同样存在问题。
最终发现,问题是因为body
元素overflow: hidden
,将其设置为visible
并可以工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.