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

StackOverflow https://stackoverflow.com/questions/21462683

Pregunta

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!

¿Fue útil?

Solución

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.

Otros consejos

Made an element 2k px high to know that it would scroll. The h2 tells you how far its scrolled. Works?

http://cdpn.io/oHACi

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top