JSパーツを改修しました(C-24.0703)

＜目次＞

JSパーツの改修

※各自、デモの挙動・留意事項ご確認をお願いします。

擬似ナビでページ内リンクの位置がずれる挙動を修正しました。

改修前はhtmlにヘッダーの高さを取得して「scroll-padding-top ：ヘッダーの高さ」が付与されていました。
改修後はhtmlにヘッダーの高さを取得して「--navi-height: ヘッダーの高さ」が付与されるようになりました。

これにより、fOのシステム側でスクロール位置をヘッダーの高さを考慮した位置で調整してくれるようになりました。

改修した擬似ナビは４つです。

擬似ナビ２段
擬似ナビ１段
メガメニュー
メガメニュー（２段）

注意点

フェードインアニメーションが入っているページでは、
ページ内リンクのスクロール位置がズレます。
これは共通パーツを使用していても発生します。
現在、対応策を検討中ですが制作・アップセル時にはご注意ください。
情報が更新されましたらまたご連絡します。

​​​​​​​

改修したコード内容

各JSコードの「ページ内遷移ずれる対策」のスコープ部分です。（例：擬似ナビ１段）

【改修前】
 /--- ページ内遷移ずれる対策 ---/
  jQuery(function () {

    const headerEl = jQuery('.js-navi_custom_sec');/* 擬似ナビ（1段）を取得 /
    const headerHight = headerEl.outerHeight(); / 擬似ナビ（1段）の高さを取得 /
    / 固定ナビの場合の処理 */
    if (headerEl.hasClass('fixed')) {
      jQuery('html').css('scroll-padding-top', ${headerHight}px);
    }

  });
  /--- ページ内遷移ずれる対策 END ---/

【改修後】
/--- ページ内遷移ずれる対策 ---/
  window.addEventListener('load', () => {
    const headerSec = document.querySelector('.js-navi_custom_sec'); /* 擬似ナビ（1段）を取得 /
    if (headerSec) {
      const headerHeight = headerSec.offsetHeight; / 擬似ナビ（1段）の高さを取得 /
      / 固定ナビの場合の処理 /
      if (headerSec.classList.contains('fixed')) {
        document.documentElement.style.setProperty('--navi-height', ${headerHeight}px);
      }
    }
  });
  /--- ページ内遷移ずれる対策 END ---*/