0

我想在我的网站上使用 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;
}

当我向下滚动时，标题颜色会发生变化，但它仍然是固定的，并且不会在向下滚动时消失。我究竟做错了什么？

谢谢！

4

1 回答 1

0

您需要将类应用到您的模板或使用插件。

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

专门添加一个 id 或 data 元素到您的：

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

或者

<header id="header">

并将 js 加入到函数 php中，它应该调用自己；如果没有，您需要在主题的页脚模板中添加其文档调用。

WordPress 插件已经 3 年没有更新了，所以我不推荐它，但你可以看看它并将它与你的安装进行比较以修复它。.

于 2017-04-24T02:45:01.743 回答