Why the scrollTop in jQuery doesn't work on Firefox?

Question

I have this in my heading in my html file. The purpose of the code is to have an element (#hello) fade as the user scrolls the page. This is working as expected in Chrome, Safari and Opera, but the fade does not work in Firefox. Anyone know what is stopping it from performing the same way in all browsers?

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function() {
        $(window).scroll(function() {
            var scrollFromTop = $("body").scrollTop();
            $("#hello").css("opacity", 1.5-scrollFromTop/250);
        });
    });
</script>

What version of Firefox? You may have to use the `-moz-` prefix. References: [css-tricks.com](http://css-tricks.com/css-transparency-settings-for-all-broswers/) [caniuse.com](http://caniuse.com/#feat=css-opacity) — War10ck, Jul 22 '14 at 18:52
Firefox 30.0. -moz- prefix is for much older versions, correct? — mdurban, Jul 22 '14 at 18:54
@mdurban Actually yes, that's a very valid point. I think `opacity` has been supported from like Firefox 0.9+ so that should be fine... — War10ck, Jul 22 '14 at 18:55
In what way doesn't it work? If it's choppy, it could be because Firefox fires scroll events differently than other browsers. Could [this question](http://stackoverflow.com/questions/10353820/jquery-when-using-the-on-scroll-event-and-alert-firefox-seems-to-infinite-loop) address your problem? — Ryan Mitchell, Jul 22 '14 at 18:57
@War10ck - I'm quite sure `opacity` is pretty much one of the *standard* CSS property that a browser must have. — Derek 朕會功夫, Jul 22 '14 at 19:00
@RyanMitchell I mean it doesn't work by it doesn't seem like an JS is even happening. In the other three browsers I've tried, the element gradually disappears. In Firefox, it seems like absolutely nothing happens to the element as I scroll (no change in opacity). — mdurban, Jul 22 '14 at 19:02
More discussion here: http://blog.c-krylatov.com/2013/05/05/make-sure-that-scrolls-jquery-event-will-work-everywhere/ — Ryan Mitchell, Jul 22 '14 at 19:06
@Derek朕會功夫 For modern browsers yes, but check the first reference above for support in legacy browsers. It's not as common as you would think. Prefixes were quite common... — War10ck, Jul 22 '14 at 20:30

score 3 · Accepted Answer · edited May 23 '17 at 11:57

3

Use : $(document).scrollTop();

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

Like this :

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function() {
        $(window).scroll(function() {
            var scrollFromTop = $(document).scrollTop();
            $("#hello").css("opacity", 1.5-scrollFromTop/250);
        });
    });
</script>

Live demo.

edited May 23 '17 at 11:57

Community

1
1

answered Jul 22 '14 at 19:02

A-312

10,203
4
38
66

Thanks Hors! Works perfectly now. – mdurban Jul 22 '14 at 19:05

score 0 · Answer 2 · answered Jul 22 '14 at 18:49

0

Try closing your script tag with </script>

answered Jul 22 '14 at 18:49

Jordi

156
1
18

Sorry, it is closed. I'm having trouble getting SO's editor to not cut it off – mdurban Jul 22 '14 at 18:50

score 0 · Answer 3 · edited May 23 '17 at 12:13

0

$("body").scrollTop() doesn't work in firefox. Per this answer, try $(window).scrollTop() (see jsfiddle here):

$(function() {
   $(window).scroll(function() {
      var scrollFromTop = $(window).scrollTop();
      $('#hello').html(scrollFromTop);
      $("#hello").css("opacity", 1.5-(scrollFromTop/250));
   });
});

edited May 23 '17 at 12:13

Community

1
1

answered Jul 22 '14 at 19:15

Trevor

11,966
11
74
94

Why the scrollTop in jQuery doesn't work on Firefox?

3 Answers3