[英]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
. 我想做两件事-像这样jsFiddle更改滚动页面部分(向下滚动出现下一个部分,向前滚动向上),并在
scroll down > 100px
时淡入菜单。 The problem is that in both situations, I should use the scrollTop()
method, which always returns 0
. 问题在于,在两种情况下,我都应该使用
scrollTop()
方法,该方法始终返回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. 我的代码与该jsFiddle中的代码相同,但是当我尝试滚动时什么也没发生(滚动根本不起作用!),并且控制台中没有错误。
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
类,以使其高度为100%:
.full-screen-element{
height:100%;
min-height:100%;
height:auto !important;
}
I also tried to use jQuery Mouse Wheel but same problem there. 我也尝试过使用jQuery Mouse Wheel,但那里同样存在问题。
最终发现,问题是因为body
元素overflow: hidden
,将其设置为visible
并可以工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.