将 DOCTYPE html 添加到我的 index.html 会破坏我的 javascript答案

【问题标题】：Adding DOCTYPE html to my index.html breaks my javascript将 DOCTYPE html 添加到我的 index.html 会破坏我的 javascript
【发布时间】：2020-08-26 08:34:24
【问题描述】：

当我添加时

<!DOCTYPE html>

到我的 html 文件的顶部，我链接的 script.js 停止工作。但是，如果没有 doctype 标签，它可以正常工作。它应该在我向下滚动时向我的导航添加一个类，并在我向上滚动时将其删除。

这是我的 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");
    }
};

感谢任何帮助。谢谢！

【问题讨论】：

您是否尝试删除 use strict 部分？
我做到了。但是，当我添加时它仍然不起作用
触发有错误吗？或者它根本不运行？我在 onscroll 处理程序中没有看到任何明显违反严格模式的内容...
您可能会考虑通过验证器运行您的 HTML——也许您对该文档类型有一些无效的标记...
控制台出现什么错误？

标签： javascript html css

【解决方案1】：

错误是因为 HTML 5 中的 document.body.scrollTop 已弃用，而是使用 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');
  }
};

【讨论】：