如何使用 CSS 或 JS 禁用粘性标题？答案

【问题标题】：How to disable the sticky header using CSS or JS?如何使用 CSS 或 JS 禁用粘性标题？
【发布时间】：2020-07-11 06:42:54
【问题描述】：

我正在制作这个网站，我想禁用粘性标题，但主题没有提供执行此操作的选项，并且一旦菜单被粘性，主题就不会添加类。我试过改变 position:absolute 但它不起作用。我现在最后的希望是在网站滚动后使用 JS 在标题中添加一个类，而不仅仅是禁用菜单，但我不确定如何实现。

这是该网站的链接：https://vectormsp.co.uk/

这是标题包装器，我尝试将位置更改为绝对位置，但它似乎不起作用。

#headerwrap {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
}

【问题讨论】：

你是怎么尝试的？你可以编辑主题的 CSS 吗？
我尝试在 Chrome 中使用 Inspect Element 并添加自定义 CSS。我查看了主题 CSS，但找不到有关菜单的部分。
当你检查元素时，你可以看到在哪里定义，文件和行，去那里编辑它的规则。

标签： javascript html jquery css

【解决方案1】：

只需将fixed 更改为relative

     #headerwrap {
         position: relative;
     }

【讨论】：

body #headerwrap { ... } 在开始时添加正文，但仍然没有，那么您也可以使用 !important。

【解决方案2】：

你可以使用：

if(window.scrollY==0){
 console.log("User is at the top of the page!")
}

因此，当用户位于页面顶部时，要使用 Javascript 向元素添加一个类，您可以使用以下内容：

let header = document.getElementById("headerwrap")
if(window.scrollY==0){
    header.classList.add("NAME-OF-CLASS-TO-ADD");
}
else {
    header.classList.remove("NAME-OF-CLASS-TO-REMOVE");
}

【讨论】：

这不起作用，因为滚动似乎返回负值。
您使用的主题的滚动有点奇怪。它不适用于该方法。您使用的主题名称是什么？
主题是来自 Themify 的 Fullpane。