javascript Issue12：20180620 - no74。ナビゲーションメニュー改修

Posted 2021-05-03

// AMPから飛んできた時の処理
(function($){
  var hash = location.hash;
  var globalNavHeight = $('#js-globalNav').outerHeight();

  // PR文の位置に移動して続きを展開する
  if (hash.match('#amp-pr-more')) {
    var $prObj = $('#js-shop-pr');
    var $prMoreBtn = $prObj.find('.js-textExpand__button');

    if ($prMoreBtn.length <= 0) return;

    location.hash = '_';
    window.scrollTo(0, $prObj.offset().top - globalNavHeight);

    $prObj.find('.js-textExpand--visible').removeClass('js-textExpand--add');
    $prObj.find('.js-textExpand--hidden').show();
    $prMoreBtn.remove();
  }

  // ページ内リンクの位置を追従グロナビ分調整
  if (hash.match('#shopDetail')) {
    var changeOffset = function changeOffset() {
      var $shopDetailObj = $('#shopDetail');

      if ($shopDetailObj.length <= 0) return;

      location.hash = '_';
      window.scrollTo(0, $shopDetailObj.offset().top - globalNavHeight);
    }

    var checkAjax = function checkAjax() {
      var $surroundingShop = $('#js-inductionSurroundingShopList-component');
      var $surroundingShopObj = $surroundingShop.find('.section');

      // ajax DOMの生成を確認
      if ($surroundingShopObj.length) {
        changeOffset();
      } else {
        if ($surroundingShop.hasClass('js-abopt-nodata')) {
          changeOffset();
          return;
        }

        setTimeout(function() {
          checkAjax();
        }, 100);
      }
    }

    checkAjax();
  }
})(jQuery);

import { addClass, removeClass } from '../utils/DOM'

// スクロール位置
const getScrollPosition = () => {
  const posY = document.documentElement.scrollTop || document.body.scrollTop
  return posY
}

// ページ内のelmのY座標
const getTargetPositionY = elm => {
  const rect = elm.getBoundingClientRect()
  return rect.top + pageYOffset
}

// /plan 以下かどうかのURL判別
const isPlan = () => location.href.indexOf('/plan') !== -1

export default function globalNavSticky() {
  // /plan 以下のページでは追従させないので処理しない
  if (isPlan()) return

  const globalNav = document.getElementById('js-globalNav')

  if (!globalNav) return

  const globalNavWrapper = document.getElementById('js-globalNav-wrapper')
  const globalNavWrapperHeight = globalNavWrapper.getBoundingClientRect().height
  const globalNavposY = getTargetPositionY(globalNav)

  // fixさせない親要素で高さをキープして、グロナビ本体のfix時にガクンとさせない
  globalNavWrapper.style.height = `${globalNavWrapperHeight}px`

  addEventListener('scroll', () => {
    if (getScrollPosition() >= globalNavposY) {
      addClass(globalNav, '-sticky')
    } else {
      removeClass(globalNav, '-sticky')
    }
  })
}