https://www.fujikura.co.jp/common/js/nav-accordion.js

1$(document).ready(function(){
2  /*スマホGメニュー(仮)*/
3  $('.third_page_ttl').not('.sp_page_menu').click(function() {
4    $(this).next('.contents_col').children('.left_nav').slideToggle();
5    $(this).toggleClass('on');
6  });
7  $('.sp_page_menu').click(function() {
8    $(this).next('.sp_page_nav').slideToggle();
9    $(this).toggleClass('on');
10  });
11
12// ウィンドウサイズの処理
13 // サイドバー追従
14 function applyWideBehavior() {
15  $(window).on('scroll resize', function() {
16    if ($(window).width() < 769) {
17      return; // 768px 以下では処理を行わない
18    }
19    var hdHight = $("header").outerHeight();
20    // スクロール位置
21    var scroll = $(document).scrollTop() + hdHight;
22    // コンテンツエリアのトップ
23    var contenttop = $(".page-inner").offset().top;
24    // サイドバーの左位置
25    var sideleft = $(".page-nav").offset().left;
26    // サイドバーの高さ
27    var sideheight = $(".page-nav").outerHeight();
28    // サイドバーの上マージン
29    var sidemargintop = 0;
30    // サイドバーの下マージン
31    var sidemarginbottom = 20;
32    // フッターTOP位置
33    var footertop = $(".contft_posi").offset().top;
34    // コンテンツエリアの高さ
35    var contentheight = $(".page-content").outerHeight();
36	/*
37    if (contentheight > sideheight) {
38      //コンテンツの量が多い時
39      if (scroll > (footertop - sidemarginbottom - sidemargintop - sideheight)) {
40        // フッターにあたった場合
41        $(".page-nav").css({
42          'position': 'absolute',
43          'top': 'auto',
44          'bottom': '0',
45        });
46      } else if (scroll > (contenttop - sidemargintop)) {
47        // 追従時
48        $(".page-nav").css({
49          'position': 'fixed',
50          'top': '70px',
51          'bottom': 'auto',
52        });
53      } else {
54        // 追従するまでスクロールされてないとき
55        $(".page-nav").css({
56          'position': 'static',
57          'top': '0',
58          'bottom': 'auto',
59        });
60      }
61    } else {
62      //コンテンツの量が少ない時
63      $(".page-nav").css({
64        'position': 'static',
65        'max-height': '100%',
66      });
67    }*/
68  });
69}
70
71// サイドバー動作解除
72function removeWideBehavior() {
73  $(".page-nav").css({
74    position: "relative",
75    top: "auto",
76    bottom: "auto",
77  });
78}
79
80
81
82// ウィンドウサイズの処理
83// メディアクエリ設定
84const mediaQuery = window.matchMedia("(max-width: 768px)");
85
86// 初期状態での条件分岐
87function handleInitialState() {
88  if (mediaQuery.matches) {
89    // 768px以下
90    removeWideBehavior();
91  } else {
92    // 769px以上
93    applyWideBehavior();
94  }
95}
96
97// 初期状態適用
98  handleInitialState();
99
100  // ウィンドウサイズ監視
101  mediaQuery.addEventListener("change", function (e) {
102    if (e.matches) {
103      // 768px以下
104      removeWideBehavior();
105
106    } else {
107      // 769px以上
108      applyWideBehavior();
109    }
110  });
111
112});