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

テンプレートにクラスを適用するか、プラグインを使用する必要があります。

参照文書は、修正するために、あなたのインストール：

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

または

<header id="header"> 

And enqueue the js to functions php

、それが呼び出す必要があります： http://wicky.nillia.ms/headroom.js/

は、具体的にあなたのIDまたはデータ要素を追加します自体;そうでない場合は、ドキュメント呼び出しをテーマのフッターテンプレートに追加する必要があります。

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.。