Adding DOCTYPE html to my index.html breaks my javascript

Question

When I add

<!DOCTYPE html>

to the top of my html file, my linked script.js stops working. However, it works fine without the doctype tag. It should add a class to my nav when i scroll down and remove it when i scroll back up.

Here is my javascript:

var myNav = document.getElementById('header');
window.onscroll = function () { 
    "use strict";
    if (document.body.scrollTop >= 50 ) {
        myNav.classList.add("nav-colored");
        myNav.classList.remove("nav-transparent");
    } 
    else {
        myNav.classList.add("nav-transparent");
        myNav.classList.remove("nav-colored");
    }
};

Any help is appreciated. Thanks!

Answer 1

The error is because document.body.scrollTop in HTML 5 is deprecated instead use document.documentElement.scrollTop

var myNav = document.getElementById('header');
window.onscroll = function () {
  'use strict';
   if (document.documentElement.scrollTop >= 50) {
    myNav.classList.add('nav-colored');
    myNav.classList.remove('nav-transparent');
  } else {
    myNav.classList.add('nav-transparent');
    myNav.classList.remove('nav-colored');
  }
};

more information document.body.scrollTop Firefox returns 0 : ONLY JS

Adding DOCTYPE html to my index.html breaks my javascript

Question

1 answers

solution1
1 ACCPTED 2020-08-26 00:34:24

Adding DOCTYPE html to my index.html breaks my javascript

Question

1 answers

solution1 1 ACCPTED 2020-08-26 00:34:24

solution1
1 ACCPTED 2020-08-26 00:34:24