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!

`$('document')` should be `$(document)`, not sure how that affects your question though. — Kevin B, Oct 17 '12 at 18:50

score 41 · Accepted Answer · answered Oct 17 '12 at 18:57

41

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

answered Oct 17 '12 at 18:57

jovobe

772
9
9

score 17 · Answer 2 · edited Mar 28 '14 at 15:00

17

$(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/

edited Mar 28 '14 at 15:00

Jeff Gandt

377
2
12

answered Oct 17 '12 at 19:01

Rango

3,877
2
22
32

3

its actually the right answer. $(document).scrollTop() tend not to works depending on the size of the body or others externals behaviors – Ben May 05 '14 at 16:36

score 1 · Answer 3 · answered Feb 02 '14 at 12:41

1

After some frustration with IE9 in quirks mode, I've found the that $('body').scrollTop() works reliably in IE9, Chrome 32 and Firefox 26.

answered Feb 02 '14 at 12:41

Boaz

19,892
8
62
70

score 0 · Answer 4 · edited May 23 '17 at 12:34

0

Use var scrollTop = $('html').scrollTop(); works for FireFox

You'll need to sniff the browser out though (I know, feature detect, not sniff, but you can't detect this), because it won't work in Chrome, try here :

Easiest/Lightest Replacement For Browser Detection jQuery 1.9?

edited May 23 '17 at 12:34

Community

1
1

answered Oct 17 '13 at 06:11

Matt Robinson

1

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

4 Answers4

Linked