ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年11月15日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

多くの 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)必要があります。)

 



コメントを残す

コメント