Why wont this script work in Firefox?

Question

I'm having this script, and it works fine in every browser except firefox.

var header = document.getElementById('header');
var arrow = document.getElementsByClassName('toTop-transparent')[0];
window.onscroll = function () {
    "use strict";
    if (document.body.scrollTop > 7) {
        header.className = 'header-colored';
        arrow.className = 'toTop';
    } else {
        header.className = 'header-transparent';
        arrow.className = 'toTop-transparent';
    }
};

The script doesn't seem to load at all. It's supposed to change the color of my header on scroll, and bring forth a 'back to top' button, but in firefox it does nothing. Any ideas on why this doesn't work?

I've tried updating browser to latest version, start in safe-mode without any add-ons.

Edit: I no longer have any errors in console on my site. The script still won't load, it seems like there is something in the script that firefox doesn't understand?

You should change the "http://code.jquery.com/jquery-2.1.3.min.js" to "https://code.jquery.com/jquery-2.1.3.min.js" that is http to https when you use it in your code — GraveyardQueen, Nov 23 '16 at 10:35
possible dublicate for this: http://stackoverflow.com/questions/18251128/why-am-i-suddenly-getting-a-blocked-loading-mixed-active-content-issue-in-fire — Vladimir M, Nov 23 '16 at 10:37
@GraveyardQueen I'm sorry, but I'm having trouble seeing whats the difference between those two? I tried removing the http:// from the — r4tchet, Nov 23 '16 at 10:51
nope instead of http://... use https://.. and please check the explanation as provided by @Vladimir M — GraveyardQueen, Nov 23 '16 at 10:56
@GraveyardQueen Ah, yes, that fixed the error in console. Other script still doesn't work though. I am readin the question he linked now, but it basically just tells me what you did. I'm stilling not getting the other script to work. — r4tchet, Nov 23 '16 at 11:06
Can you post the html code as well so that we can try it out as well? — GraveyardQueen, Nov 23 '16 at 11:21
@GraveyardQueen https://jsfiddle.net/0owz7kt5/1/ , url for site if its easier: https://ludviklund.github.io/finalassignment2/ — r4tchet, Nov 23 '16 at 11:39

score 0 · Accepted Answer · answered Nov 23 '16 at 11:52

This code works in IE, Chrome and FF:

var header = document.getElementById('header');
var arrow = document.getElementsByClassName('toTop-transparent')[0];
var supportPageOffset = window.pageXOffset !== undefined;

window.onscroll = function() {
  "use strict";
  var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

  if (y > 7) {
    console.log('here 1')
    header.className = 'header-colored';
    arrow.className = 'toTop';
  } else {
    console.log('here 2')
    header.className = 'header-transparent';
    arrow.className = 'toTop-transparent';
  }
};

Fiddle: https://jsfiddle.net/zevane/zf8d4u36/

Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY

Why wont this script work in Firefox?

1 Answers1