简体   繁体   English

jQuery滚动仅检测页面顶部和底部的滚动吗?

[英]jQuery scroll only detecting scroll at very top of the page and bottom?

I'm currently trying to change the colour of a div when the scroll is at a certain vertical value. 我目前正在尝试在滚动达到某个垂直值时更改div的颜色。 Though at the moment my scroll doesn't seem to be detecting anything in between the top or bottom of the page. 尽管此刻我的滚动似乎并未检测到页面顶部或底部之间的任何内容。

So when I hit the bottom of the page I see 0, 1, 2, 3, 4, 5, etc and when I hit the top it appears 0, -1, -2, -3, etc. So it seems that there is no page in between the top and the bottom of the page as scroll isn't triggered anywhere other than the very top or bottom of the page. 因此,当我点击页面底部时,我会看到0、1、2、3、4、5等,当我点击页面顶部时,它会显示0,-1,-2,-3等。所以看来在页面的顶部和底部之间没有页面,因为除了页面的顶部或底部以外,没有触发滚动。

HTML structure: HTML结构:

<body>
    <div id="container">  
         <div id="post-view">
             <div id="cover-image">
                 <header>
                     <div class="title">
                     </div>
                     <div class="sub-title">
                     </div>
                 </header>                 
             </div>
         </div>
         <div class="suggested">
             content in here
         </div>
    </div>
</body>

jQuery: jQuery的:

$(document).scroll(function() {
    var y = $(this).scrollTop();
    console.log(y);
});

CSS: CSS:

html, body{
height:100%;
width:100%;
background: #ffffff !important;
overflow-x: hidden;
margin:0;
}

header{
width:100%;
border-bottom: 1px solid #cccccc;
background: #333333;
overflow:hidden;
padding:10px 0 0 0 ;
}

#container{
width:100%;
}

Any help is greatly appreciated, if you need any more info just comment. 非常感谢您的帮助,如果您需要更多信息,请评论。 Thanks! 谢谢!

As you can see above I have in my CSS html, body { height:100% } this was the culprit. 如您在上面看到的,我的CSS html, body { height:100% }这是元凶。 Really strange. 真的很奇怪 Got it working now. 现在工作了。 Thanks for your time. 谢谢你的时间。

Made an element 2k px high to know that it would scroll. 使元素高2k像素以知道它将滚动。 The h2 tells you how far its scrolled. h2告诉您滚动了多远。 Works? 作品?

http://cdpn.io/oHACi http://cdpn.io/oHACi

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM