javascriptjqueryhtmlscrolljquery-scrollable

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

HTML structure:

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

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

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!

Solution

  • As you can see above I have in my CSS html, body { height:100% } this was the culprit. Really strange. Got it working now. Thanks for your time.