Diviテーマでスクロールすると、ヘッダーが減らないようにする方法

Last Updated: 2020 年 11 月 14 日 7のコメント

エレガント ThemesのDiviテーマでページを下にスクロールすると、ヘッダーが軽く減る効果が適用されます。 このような効果は、他のテーマでもよく適用されるのを目撃します。

このように、マウスを下にスクロールしたときに減少する効果(Shrink)を取り除くには、次のjQueryコードを使用することができます。

<script>
(function(){
// Override the addClass to prevent fixed header class from being added
var addclass = jQuery.fn.addClass;
jQuery.fn.addClass = function(){
var result = addclass.apply(this, arguments);
jQuery('#main-header').removeClass('et-fixed-header');
return result;
}
})();
jQuery(function($){
$('#main-header').removeClass('et-fixed-header');
});
</script>

上記のジェイクエリスクリプトを Divi > Themes Options > Integration タブの Add code to the < head > of your blog セクションに追加するだけです。 詳しくは、「Diviテーマでjavascript / jQueryを挿入する"文を参照してください。

参考までに Diviテーマから マウスをスクロールするとき、ヘッダーが固定されないようにする Divi > Themes Options > General タブで Fixed Navigation Barを無効にします。

エレガント ThemesのDiviテーマ

上の図のように 有効にする ボタンを 無効にしますに変え設定を保存すると、ページを下にスクロールしてもヘッダが固定されていません。

メモ:


7のコメント

コメント

  1. 一つお尋ねみるよいます。 現在Fixed Navigation Barを有効にさせてヘッダを固定?しました。 デスクトップから見ると、ヘッダーがついてくる、携帯電話では、ヘッダがスクロールについてこないですね。 モバイルでもヘッダがついてくることができるように設定をどうすればいい?

    応答
    • こんにちは?

      この部分は認識できずでしたが、実際にテストしてみると、モバイルでは、ヘッダーが固定されてないですね。

      次のコードを使用してみてください。

      /* Divi 테마에서 모바일 메뉴 고정 */
      @media (max-width: 980px) {
      .et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
      position: fixed;
      }
      }

      応答
      • 親切な説明ありがとうございます! 私別にメッセージ送信ERRを!
        確認お願いいたします。 (こっくり)

      • こんにちは? 回答送信しました。

        ちなみにKorea SNSプラグインは、最近更新されたことが2016年10月10日ですね。
        アップデートがうまくいかないプラグインを使用すると、セキュリティに問題が発生することも、サイトの動作にも問題になることがあります。

        なるべく他のプラグインを知ってみた方が良さそうです。