多くの WordPress テーマで画面をスクロールすると、トップメニューが固定され、透明に表示されます。これらの効果はjQueryまたはJavaScriptを使用して実装できます。私はいくつかのjQueryコードをテストしましたが、そのうちの2つは WordPress 正常に動作することを確認しました。
テーマによっては正しく動作しない場合があります。さまざまなコードをテストして、使用しているテーマと最も互換性のあるコードを選択してください。 CSS要素は適切に変更する必要があります。
以下のjQueryスクリプトをJavaScriptに変換して追加しました。
スクロール時に固定メニューを透明にするjQuery / JavaScriptの例
$(document).ready(function(){ $(document).scroll(function(){ var top=$(this).scrollTop(); if(top<150){ var dif=1-top/150; $("#divID").css({opacity:dif}); } }) }); // Source: http://stackoverflow.com/
上記のコードがうまくいかなかったら、次のjQueryコードでテストしてみてください。
$(window).scroll(function() { if($(this).scrollTop() == 0) $('#divID').css('opacity','1'); else $('#divID ').css('opacity','.4'); }); // Source: http://stackoverflow.com/
ここで デモを確認することができます。 （参考までに WordPressでjQueryを使用するには、 エンキュー 作業を通じてjQueryを WordPressフック（hook）必要があります。）
追加：JavaScriptバージョン
jQueryはサイトの速度に悪影響を及ぼす可能性があるため、以下のJavaScriptコードを最初にテストしてください。
window.addEventListener('scroll', function() {
if (window.scrollY === 0) {
document.getElementById('header-wrap').style.opacity = '1';
} else {
document.getElementById('header-wrap').style.opacity = '0.4';
}
});jsfiddleでデモを見ることができます。
スクロールダウンしたり上げるとロゴの色が変わることも教えてください ロゴの色やファイルが変わる、...
ロゴ画像が変わるには、2つのロゴを用意して、下にスクロールするときと上にスクロールするときに別のロゴ画像が表示されるようにする必要があります。