スクロール時の固定メニューを透明にするjQueryの例

多くの WordPress テーマで画面をスクロールすると、トップメニューが固定されて透明に表示されるようにします。 これらの効果をjQueryを使用して実装することができます。 いくつかjQueryのコードをテストしたところ、そのうちの下の二つのコードが WordPress 正常動作することを確認しました。 注意：テーマに沿って正常に動作しない可能性があります。 いくつかのコードをテストして、使用しているテーマと最も互換性があるコードを選択してください。

$(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）必要があります。）