javascript - 根据页面更改附加到 HTML 标记的 CSS？

Question

所以我有一个主页，它使用 Scrollmagic.js 来上下滚动页面，并且要求 HTML 标记相对保持不变。在每个其他页面上，我需要 HTML 标记具有 100% 的高度，否则粘性页脚 CSS 将不起作用，但如果我将 100% 的高度添加到主页，则不会滚动。那么，在 CSS 或 jQuery 中是否有一种方法可以根据用户所在的页面更改 HTML 高度？

或者是否有一种粘性页脚方法不在 HTLM 标记上使用 100% 的高度，例如:

    html, body {
      height: 100%;
    }

谢谢

Answer 1

您可以使用 URL 来检查您所在的页面，并根据页面调整 CSS。

JavaScript

window.onload = function() {
    var url = window.location.href;
    var pageurl = url.substring(url.indexOf('.com')+4,url.length);
    var html = document.querySelector('html');

    if(pageurl !== "/index.html") {
      /* adjust css if we're not on the index.html page */
      html.style.height = "100%";

    }
}