一定量でヘッダー固定系JSとプラグインのコンクリフトについて

  • L

    スクロールするとグローバルメニューが固定されるというJSを使っています。
    トップページ、固定ページはある一定の高さをスクロールすると固定され、思った通りの表示ができますが、
    パーマリンクページのみ動作しません。
    このJSは、一定の高さをスクロールするとfixedというクラス名がつくというものです。
    ソースを見ながら動作させてみると、トップページ、固定ページはスクロールでfixedが
    追加されますが、パーマリンクページはfixedが付いていませんでした。
    プラグインをすべて無効化したところ動作したので、一つ一つ確認してみたところ、
    Rich Table of Contentsという目次を作るプラグインが原因のようです。

    Rich Table of Contentsの基本設定＜目次を表示させるページ　の設定を変更してみたところ、
    以下のような状態でした。

    投稿○　固定ページ○　→　投稿ページ（パーマリンクページ）のみ動作せず、固定ページは動作する
    投稿○　固定ページ✕　→　投稿ページ（パーマリンクページ）のみ動作せず、固定ページは動作する
    投稿✕　固定ページ○　→　投稿ページ（パーマリンクページ）、固定ページともに動作する
    投稿✕　固定ページ✕　→　投稿ページ（パーマリンクページ）、固定ページともに動作する

    違うプラグインを使う選択はありますが、どうにか共存させる方法ってないんでしょうか？
    （なお、JSはHTMLタグ設定の「bodyタグの終わり」に追加で書いています）

    ………………………………………………………………………
    以下、記載しているJSです。

    <script type="text/javascript">
$(function() {
	var headNav = $("#nav-container");
	//scrollだけだと読み込み時困るのでloadも追加
	$(window).on('load scroll', function () {
		//現在の位置が120px以上かつ、クラスfixedが付与されていない時
		if($(this).scrollTop() > 120 && headNav.hasClass('fixed') == false) {
			//headerの高さ分上に設定
			headNav.css({"top": '-100px'});
			//クラスfixedを付与
			headNav.addClass('fixed');
			//位置を0に設定し、アニメーションのスピードを指定
			headNav.animate({"top": 0},600);
		}
		//現在の位置が300px以下かつ、クラスfixedが付与されている時にfixedを外す
		else if($(this).scrollTop() < 200 && headNav.hasClass('fixed') == true){
			headNav.removeClass('fixed');
		}
	});
});
</script>

    マニュアル確認済み
    キャッシュクリア済み
    プラグイン全停止済み
    WordPressのバージョン : 5.8
    ご利用のサーバー名 :
    PHPのバージョン : 7.3.5
    OS : Windows10
    ご利用のブラウザ : Vivaldi
    該当サイトのURL :

    0 1 件の返信

  • @Lipton さん

    こんにちは！

    現状のサイトを拝見していないので何とも言えませんが、
    干渉している箇所を見つけ、分岐によって干渉しないようにするなどの対処が必要かもしれません。

    また、大変申し訳ありませんが、カスタマイズによるテーマやプラグインの干渉につきましては
    サポート対象外となっておりますので、Lipton さんご自身で解決いただけますと幸いでございます。

    大変恐縮ではございますが、何卒ご了承の程よろしくお願い申し上げます。

    0
  • L

    お返事ありがとうございます。
    何度かいじっているうちに、正常に表示されるようになりました。おそらくキャッシュのせいかもしれません。
    お騒がせいたしました。
    ありがとうございます。

    1