Using Headroom.js with WordPress

Question

我想在我的网站上使用headroom.js，以便在向下滚动并在滚动时重新出现时可以隐藏标头。我正在使用WordPress。

我尝试将JS文件放在主题文件夹中并使用functions.php调用它，但似乎不起作用，因此我使用此插件：https：//twd.wordpress.org/plugins/headroomjs/.

我在其他CSS中具有以下内容：

.headroom {
transition: transform 200ms linear;
}
.headroom--top .x-navbar {
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
}
.sub-menu ul li{
	color: #ddd !important;
}
.headroom--top .x-navbar a{
 	color: #fff !important;
}
.headroom--top .x-navbar .desktop .sub-menu a{
 	color: black !important;
}
.headroom--not-top .x-navbar {
    background-color: #fff;
}
.headroom {
  transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
  transform: translateY(-100%);
  webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.headroom {
  position: fixed;
  z-index: 12;
  right: 0;
  left: 0;
  top: 0;
  webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.masthead {
height:0px;
}

当我向下滚动时，标头颜色正在变化，但仍固定，并且在向下滚动时不会消失。我究竟做错了什么？

谢谢！

Answer 1

您要么需要将类应用于模板或使用插件。

请参阅文档以更正您的安装：http：//wicky.nillia.ms/headroom.js/

专门为您的ID或数据元素添加：

<!-- selects $("[data-headroom]") -->

或

<header id="header">

并将JS加入功能PHP，它应该自称为自身；如果不是，则需要在主题的页脚模板中添加其文档调用。

WordPress插件尚未在3年内更新，因此我不建议它，但您可以对其进行查看并与安装进行比较以修复它。