https://press.moviewalker.jp/assets/js/fab.js

1/**
2 * NOTE redmine#12609
3 * フローティングアクションボタン(fab)がSP版からなくなり
4 * ハンバーガーメニューに統一されている。
5 * DIYからの呼び出しもあるためリネームには注意
6 */
7// メニューバー用
8var mql = window.matchMedia('screen and (max-width: 768px)');
9
10// Scroll Header
11var spHeader = $('.ly_headerSP');
12var headerHeight = spHeader.outerHeight(true);
13var content = $('.ly_body');
14
15$(function () {
16  // ヘッダ
17  $(window).on('load scroll', function () {
18    scrollPos = $(this).scrollTop();
19    if (scrollPos >= 95) {
20      spHeader.addClass('is_scroll');
21      content.addClass('is_scroll');
22    } else {
23      spHeader.removeClass('is_scroll');
24      content.removeClass('is_scroll');
25    }
26
27    // スクロール追従メニュー
28    if (mql.matches) {
29      // スマホの場合のみ
30      var headNav = $('.ly_headerSP');
31      // 現在の位置が95px以上かつ、クラスfixedが付与されていない時
32      // ヘッダ（lg）55px, ヘッダ（sm）40px, 広告70px, パンくず34px
33      if ($(this).scrollTop() >= 95 && headNav.hasClass('fixed') == false) {
34        // 上部余白調整
35        var headerHeight = mql.matches ? $('.ly_headerSP').height() : $('.ly_headerPC').height();
36        $('body').css({ 'padding-top': headerHeight });
37        // headerの高さ分上に設定
38        headNav.css({ top: '-' + headerHeight + 'px' });
39        // クラスfixedを付与
40        headNav.addClass('fixed');
41        // 位置を0に設定し、アニメーションのスピードを指定
42        headNav.animate({ top: 0 }, 300);
43      }
44      // 現在の位置が95px以下かつ、クラスfixedが付与されている時にfixedを外す
45      else if ($(this).scrollTop() < 95 && headNav.hasClass('fixed') == true) {
46        headNav.removeClass('fixed');
47        // 上部余白調整
48        $('body').css({ 'padding-top': 0 });
49      }
50    }
51  });
52
53  $('nav').on('click', function (event) {
54    event.stopPropagation();
55  });
56
57  // PCドロワーメニュー
58  $('.un_menuTogglePC').on('click', function (event) {
59    event.stopPropagation();
60    if ($(this).hasClass('active')) {
61      // メニューOFF
62      $(this).removeClass('active');
63      $('nav').removeClass('active');
64      // スクロールロック解除
65      $('body').css({ height: 'auto', overflow: 'scroll' });
66    } else {
67      // メニューON
68      $(this).addClass('active');
69      $('nav').addClass('active');
70      // スクロールロック
71      $('body').css({ height: '100vh', overflow: 'hidden' });
72      // ナビ内部を一番上に移動
73      $('nav').scrollTop(0);
74    }
75  });
76
77  // SPドロワーメニュー
78  $('.un_menuToggleSP').on('click', function (event) {
79    event.stopPropagation();
80
81    // メニューOFF
82    if ($(this).hasClass('active')) {
83      $('.un_menu').css({ top: '200vh' });
84      $(this).removeClass('active');
85      $('nav').removeClass('active');
86      // スクロールロック解除
87      $('body').css({ height: 'auto', overflow: 'scroll' });
88    }
89    // メニューON
90    else {
91      // メニューをヘッダーの高さの位置から開始する
92      const headerHeight = $('.ly_headerSP').height();
93      $('.un_menu').css({ top: headerHeight });
94      $(this).addClass('active');
95      $('.un_menu').addClass('active');
96      // スクロールロック
97      $('body').css({ height: '100vh', overflow: 'hidden' });
98      // ナビ内部を一番上に移動
99      $('.un_menu').scrollTop(0);
100    }
101  });
102
103  // SP検索ボタン
104  $('.un_menuToggleSearch').on('click', function (s) {
105    s.stopPropagation(),
106      $(this).hasClass('active')
107        ? ($('.un_search').css({
108            top: '200vh',
109          }),
110          $(this).removeClass('active'),
111          $('nav').removeClass('active'),
112          $('body').css({
113            height: 'auto',
114            overflow: 'scroll',
115          }))
116        : ((s = $('.ly_headerSP').height()),
117          $('.un_search').css({
118            top: s,
119          }),
120          $(this).addClass('active'),
121          $('.un_search').addClass('active'),
122          $('body').css({
123            height: '100vh',
124            overflow: 'hidden',
125          }),
126          $('.un_search').scrollTop(0));
127  });
128
129  // PC bodyクリックでメニューを閉じる
130  $(document).on('click', function () {
131    $('.un_menuTogglePC').removeClass('active');
132    $('nav').removeClass('active');
133    // スクロールロック解除
134    $('body').css({ height: 'auto', overflow: 'scroll' });
135  });
136});