在WordPress中使用Headroom.js

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{ 
 
\t color: #ddd !important; 
 
} 
 

 
.headroom--top .x-navbar a{ 
 
    \t color: #fff !important; 
 
} 
 

 
.headroom--top .x-navbar .desktop .sub-menu a{ 
 
    \t 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"> 

And enqueue the js to functions php，它應該調用本身;如果不是，則需要將其文檔調用添加到主題的頁腳模板中。

The WordPress plugin hasn't been updated in 3 years so I don't recommend it but you could give it a look and compare it with your install to fix it.。