scrollTop() returns 0 in Firefox, but not in Chrome

Question

Not sure if there's another question regarding this, if so I apologize and please don't release the hounds.

Using the html5 doctype and doing a quick console.log off my scroll listener that tells me the value of scrollTop() value. I'm basically doing this so when I scroll past a point, I change the opacity of an element. I'm doing this using an MVS solution and I don't have the ability to push this to an external site so you can look. Here's a quick snippet:

var opacity = 1; var scrollTop = $('body').scrollTop(); if (scrollTop > 200) {    opacity = 0.1; } $('#element).css('opacity', opacity); 

If I scroll in Chrome, I get a console.log(scrollTop); displaying what I want (ie; 100 for each scroll I do) and my opacity disappears after I hit 200 scrollTop. If I scroll in FF and IE7+ the var returns "0" each scroll. If I change $('body').scrollTop() to $('document').scrollTop(); then I get a "null" return on scroll.

Any ideas? Thanks!

Answer 1

Try to use var scrollTop = $(document).scrollTop();

Answer 2

$(window).scrollTop() works as expected in both Firefox and Chrome.

For verification run the following jsfiddle in both chrome and firefox: http://jsfiddle.net/RBBw5/6/