Alt-k
3/12/2020 - 2:38 AM

スクロール途中からグロナビ固定（固定ヘッダーの高さを含めて計算）

（参考サイト） https://www.nxworld.net/tips/stikcy-or-change-header-and-navigation-when-scrolling-using-jquery.html

common.js
content_copyfile_download
 //　スクロール途中からグローバルナビを固定（スマホでは無効化）
 if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
   $(function () {
      var $win = $(window),
         $main = $("body"),
         $nav = $(".g_nav"),
         navHeight = $nav.outerHeight(),
         navPos = $nav.offset().top,
         fixedClass = "is_fixed";

      $win.on("load scroll", function () {
         var value = $(this).scrollTop();
         if (value > navPos) {
            $nav.addClass(fixedClass);
            $main.css("margin-top", navHeight);
         } else {
            $nav.removeClass(fixedClass);
            $main.css("margin-top", "0");
         }
      });
   });
}
index.html
content_copyfile_download
<div class="g_nav">
</div>
style.css
content_copyfile_download
.is_fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}