https://jinkuri.com/wp/wp-content/themes/hero-cms/js/main.js

1/******************************
2共通変数
3******************************/
4let headerHeight;
5let scrollPosition;
6
7
8/******************************
9ブレイクポイント通過時の処理
10******************************/
11const mediaQueryList = window.matchMedia('(min-width: 640px)'); // Breakpoint
12mediaQueryList.addEventListener("change", listener); // regist listener
13listener(mediaQueryList); //読み込み時に実行
14
15function listener(event) {
16  if (event.matches) {
17    headerHeight = jQuery('header').innerHeight();
18    scrollPosition = 90;
19    
20    jQuery("body , .nav_wrap *").removeClass('nav-open , active');
21    jQuery('.pulldown_box , .mega_box').slideUp(0);
22    jQuery('.pagetop').css("display", 'block');
23
24    if (jQuery(window).scrollTop() > headerHeight) {
25      jQuery('.nav_wrap').addClass('fixed');
26    }
27
28  } else {
29    headerHeight = jQuery('header').innerHeight();
30    scrollPosition = 130;
31
32    jQuery('.nav_wrap').removeClass('fixed');
33    jQuery('.nav_wrap').css("left", 0);
34    jQuery('.mega_box , .pulldown_box').css("display", 'none');
35    jQuery('.pagetop').css("display", 'none');
36
37    if (jQuery(window).scrollTop() > headerHeight) {
38      jQuery('.pagetop').css("display", 'block');
39    }
40  }
41}
42
43
44/******************************
45telリンク処理
46******************************/
47jQuery(function() {
48  var ua = navigator.userAgent.toLowerCase();
49  var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);
50
51  if (!isMobile) {
52    jQuery('a[href^="tel:"]').on('click', function(e) {
53      e.preventDefault();
54    });
55  }
56});
57
58
59/******************************
60headerに.fixedを付与、横スクロールに対応
61******************************/
62let nav = jQuery('.nav_wrap');
63jQuery(window).on("scroll", function () {
64  if (window.matchMedia('(min-width: 640px)').matches) {
65    if (jQuery(this).scrollTop() > headerHeight) {
66      nav.addClass('fixed');
67      jQuery(".fixed").css("left", -jQuery(window).scrollLeft());
68    } else {
69      nav.removeClass('fixed');
70      nav.css("left", 0);
71    }
72  }
73});
74
75
76/******************************
77ハンバーガーメニュー
78******************************/
79jQuery(function () {
80  //メニューの開閉
81  jQuery(document).on('click', '.btn_menu', function(){
82    jQuery('.btn_menu').toggleClass('active');
83    jQuery('body').toggleClass('nav-open')
84  });
85
86  // メニュー外をタップした時に閉じる
87  jQuery('.nav_overlay').on('click', function(){
88    jQuery('.btn_menu').toggleClass('active');
89    jQuery('body').toggleClass('nav-open');
90  });
91});
92
93
94/******************************
95MegaMenu
96******************************/
97jQuery(function () {
98  const mega = jQuery(".mega");
99  let megaTarget;
100  let posiiton;
101  let flag = true;
102  
103  jQuery(mega).on('mouseenter', (event) => {
104    if (window.matchMedia('(min-width: 640px)').matches) {
105      megaTarget = event.currentTarget;
106      posiiton = jQuery(megaTarget).offset().left;
107      jQuery(megaTarget).find('.mega_box').stop().fadeIn(200);
108    }
109  })
110
111  jQuery(mega).on('mouseleave', (event) => {
112    if (window.matchMedia('(min-width: 640px)').matches) {
113      jQuery(megaTarget).find('.mega_box').stop().fadeOut(200);
114    }
115  })
116  
117  //SP時はアコーディオン
118  jQuery(mega).find('.open_btn').on('click', function () {
119      jQuery(this).toggleClass('active');
120      if (jQuery(this).hasClass('active')) {
121        jQuery(this).prev('.mega_box').stop().slideDown(300);
122      } else {
123        jQuery(this).prev('.mega_box').stop().slideUp(300);
124      }
125  });
126});
127
128
129/******************************
130PullDown
131******************************/
132jQuery(function () {
133  const pulldown = jQuery(".pulldown");
134  let pullTarget;
135  
136  jQuery(pulldown).on('mouseenter', (event) => {
137    if (window.matchMedia('(min-width: 640px)').matches) {
138      pullTarget = event.currentTarget;
139    jQuery(pullTarget).find('.pulldown_box').stop().fadeIn(200);
140    }
141  })
142
143  jQuery(pulldown).on('mouseleave', (event) => {
144    if (window.matchMedia('(min-width: 640px)').matches) {
145      jQuery(pullTarget).find('.pulldown_box').stop().fadeOut(200);
146    }
147  })
148
149  //SP時はアコーディオン
150  jQuery(pulldown).find('.open_btn').on('click', function () {
151    jQuery(this).toggleClass('active');
152    if (jQuery(this).hasClass('active')) {
153      jQuery(this).prev('.pulldown_box').stop().slideDown(300);
154    } else {
155      jQuery(this).prev('.pulldown_box').stop().slideUp(300);
156    }
157  });
158});
159
160jQuery(function () {
161  // リンクをタップしたらナビを閉じる（スマホ）
162  jQuery('.menu_list_wrap a').on('click' , function(){
163    jQuery('.btn_menu').toggleClass('active');
164    jQuery('body').toggleClass('nav-open')
165  });
166});
167
168
169/******************************
170pagetop
171******************************/
172topFlag = true;

173jQuery('.pagetop').click(function () {
174  if (jQuery(window).scrollTop() > headerHeight) {
175    if(topFlag){
176      topFlag = false;
177      jQuery('body,html').animate({ scrollTop: 0 }, 500, 'swing');
178
179      setTimeout(function () {
180        topFlag = true;
181      }, 600);
182
183    }
184  }
185});
186
187jQuery(window).on("scroll", function () {
188  if (window.matchMedia('(max-width: 640px)').matches) {
189    if (jQuery(window).scrollTop() > headerHeight) {
190      jQuery('.pagetop').fadeIn(150);
191    } else {
192      jQuery('.pagetop').fadeOut(150);
193    }
194  }
195});
196
197
198/******************************
199スムーススクロール
200******************************/
201let currentUrl = location.href.split('#')[0]; //現在のページ
202let scrollSpeed = 500; //スクロールのスピード
203
204// ページ内のアンカーへスクロール
205jQuery(document).on("click", 'a[href*="#"]', function () {
206  let targetUrl = jQuery(this).prop('href');
207
208  if (targetUrl.split('#')[0] === currentUrl) {
209    let target = jQuery(this.hash === '' ? 'html' : this.hash);
210    let targetPosition = target.offset().top - scrollPosition;
211
212    // スクロールアニメーションの開始
213    jQuery("html, body").animate({ scrollTop: targetPosition }, {
214      duration: scrollSpeed,
215      easing: "swing",
216      step: function(now) { // スクロール中にターゲット位置を継続して監視
217        let monitoringPosition = target.offset().top - scrollPosition;
218        if (monitoringPosition !== targetPosition) {
219          //位置がずれた場合、最新の位置に更新
220          targetPosition = monitoringPosition;
221          jQuery("html, body").stop().animate({ scrollTop: targetPosition }, 10, "swing");
222        }
223      },
224      complete: function() { // スクロール完了時に監視を終了
225        jQuery("html, body").stop();
226      }
227    });
228  }
229});
230
231//ページ外のアンカーへスクロール
232jQuery(window).on('load', function () {
233  let urlHash = location.hash;
234  if (urlHash) {
235    var target = jQuery(urlHash);
236    var position = target.offset().top - scrollPosition;
237
238    setTimeout(function () {
239      let diff = target.offset().top - scrollPosition;
240      if(position === diff){
241        jQuery('body,html').stop().scrollTop(position - 100);
242        jQuery('body,html').animate({ scrollTop: position }, scrollSpeed, 'swing');
243      } else {
244        jQuery('body,html').stop().scrollTop(diff - 100);
245        jQuery('body,html').animate({ scrollTop: diff }, scrollSpeed, 'swing');
246      }
247    }, 700);
248  }
249});
250
251
252/******************************
253アコーディオン
254******************************/
255jQuery(function () {
256  jQuery(".accordion dl dt").click(function () {
257    jQuery(this).toggleClass("open");
258    jQuery(this).next().stop().slideToggle(300);
259  });
260});
261
262
263/******************************
264タブ
265******************************/
266//１番目のタブを表示するように初期化
267jQuery(document).ready(function(){
268  jQuery('.tab_wrap .tab1').addClass('active');
269  jQuery('.tab_wrap .panel1').addClass('active').show();
270});
271
272jQuery(function(){
273  jQuery('.tab').on('click',function(){
274    var idx = jQuery(this).index();
275    jQuery(this).addClass('active').siblings('.tab').removeClass('active');
276    jQuery(this).parent().siblings('.panel_wrap').children('.panel').eq(idx).addClass('active').fadeIn(200).siblings('.panel').removeClass('active').hide();
277  });
278});
279
280/******************************
281SPナビ背景・ロゴ表示切り替え
282******************************/
283jQuery(function () {
284  function toggleNavFixed() {
285    if (window.innerWidth <= 640) {
286      if (jQuery(window).scrollTop() > 10) {
287        jQuery('.nav_wrap').addClass('nav_fixed');
288      } else {
289        jQuery('.nav_wrap').removeClass('nav_fixed');
290      }
291    } else {
292      jQuery('.nav_wrap').removeClass('nav_fixed');
293    }
294  }
295
296  // ボタンが1つもない場合はロゴ表示（ハンバーガーメニュー内）
297  if (jQuery('.sp_cta_btn.btn_top ul').children().length === 0) {
298    jQuery('.nav_wrap .sp_logo').addClass('fixed');
299  }
300
301  toggleNavFixed();
302  jQuery(window).on('scroll resize', toggleNavFixed);
303
304  // リンク時メニューを閉じる
305  jQuery('.nav_list li a').on('click', function () {
306    jQuery('.btn_menu').toggleClass('active');
307    jQuery('body').toggleClass('nav-open');
308  });
309});