https://www.okajima-dem-clinic.com/wp-content/themes/original_theme/assets/js/script.js

1// 設定 original script default
2// Ver 3.1.5
3
4var nav = jQuery('.global_nav'); // PCのナビゲーション
5var pc_horizon_flag = false;
6if(jQuery('.header').hasClass('pcsp_horizon')|| jQuery('.header').hasClass('pc_horizon')) {
7  nav = jQuery('.header'); // PCとスマホのメインナビゲーション ロゴとToggleボタン横並び
8  pc_horizon_flag = true;
9}
10var pc_menu = jQuery('.global_nav .menu'); // PCメニュー本体
11var sp_nav = jQuery('.sp_nav'); // スマホのメインナビゲーション
12if(jQuery('.header').hasClass('sp_horizon') || jQuery('.header').hasClass('pcsp_horizon') ) {
13  sp_nav = jQuery('.header'); // スマホのメインナビゲーション ロゴとToggleボタン横並び
14  sp_horizon_flag = true;
15}
16var sp_toggle = jQuery('.sp_toggle'); //スマホのトグルボタン
17var sp_close = jQuery('.sp_toggle_close');
18var sp_menu_pull = jQuery('.global_nav'); //スマホトグルメニュー本体
19var animation_speed = 300;
20// var header_hover_item = jQuery('.header_hover_item'); // hoverで開閉するヘッダーアイテム
21var header_hover_item = document.getElementsByClassName('header_hover_item'); // hoverで開閉するヘッダーアイテム
22var menu_a = jQuery('.global_nav a'); //メニューのaタグ
23var submenu_class = ".sub-menu,.sub-menu_wrap"; //サブメニューのクラス名
24var submenu_wrap_class = 'menu-item-has-children'; // サブメニューを持つアイテムのク
25var submenu_wrap_class_wide = 'wide'; // サブメニューを持つアイテムのクラス名 wide
26//var p = 768;
27var breakpoint = 768;
28var win = window.innerWidth;
29var offset_minus = 0;
30var url_global = location.href;
31var dest_global = url_global.split("#");
32var target = dest_global[1];
33var target_offset = 0;
34var target_top = 0;
35var load_or_ready = 0;
36var fixed_class = "fixed";
37var body = jQuery('body');
38var menu_bk = jQuery('.menu_bk');
39var menu_item_has_children = jQuery('.sub-menu').parent('.menu > li');
40var menu_item_has_children_wrap = jQuery('.sub-menu_wrap').parent('.menu > li');
41// var nav_padding_body = nav.next();
42
43function inicial_func(load_or_ready, target, nav, sp_nav) {
44
45  if (load_or_ready == 0) { //処理が行われているかどうか
46    if (typeof target === "undefined") {
47      //
48    } else {
49      //jQuery("html, body").stop().scrollTop(0);
50      setTimeout(function(){
51        var target_offset = jQuery("#" + target).offset();
52        var target_offset_paddingtop = parseInt(jQuery("#" + target).css('padding-top'));
53        //var target_offset_top = Number(target_offset.top + target_offset_paddingtop);
54        //var target_offset_top = Number(target_offset.top);
55        var target_offset_top = "";
56        var target_tagName = jQuery("#" + target).prop("tagName") ; 
57        if( target_tagName == "div" || target_tagName == "section" ) {
58            target_offset_top = Number(target_offset.top + target_offset_paddingtop);
59          } else {
60            target_offset_top = Number(target_offset.top );
61          }
62
63        if (win < breakpoint) {
64          offset_minus = Number(sp_nav.outerHeight());
65        } else {
66          offset_minus = Number(nav.outerHeight());
67        }
68        var target_top = Number(target_offset_top - offset_minus);
69        jQuery('body,html').stop().animate({
70          scrollTop: target_top
71        }, 800, '');
72      }, 200);
73    }
74    load_or_ready = 1;
75    return load_or_ready;
76  }
77}
78
79function anchor_func(nav, sp_nav, that) {
80
81  var url_global = location.href;
82  var dest_global = url_global.split("#");
83  var win = window.innerWidth;
84  var offset_minus = 0;
85
86  if (win < breakpoint) {
87    offset_minus = Number(sp_nav.outerHeight());
88  } else {
89    offset_minus = Number(nav.outerHeight());
90  }
91  var url = jQuery(that).prop("href");
92  var dest = url.split("#");
93
94  if (dest_global[0] == dest[0]) {
95
96    var target = dest[1];
97    var target_offset = jQuery("#" + target).offset();
98    var target_tagName = jQuery("#" + target).prop("tagName") ; 
99
100    var target_offset_paddingtop = parseInt(jQuery("#" + target).css('padding-top'));
101    var target_offset_top = "";
102    //var target_offset_top = Number(target_offset.top + target_offset_paddingtop);
103    //var target_offset_top = Number(target_offset.top );
104
105    if( target_tagName == "DIV" || target_tagName == "SECTION" ) {
106      target_offset_top = Number(target_offset.top + target_offset_paddingtop);
107    } else {
108      target_offset_top = Number(target_offset.top );
109    }
110
111    if (typeof target === "undefined") {
112      //
113    } else {
114      var target_top = target_offset_top - offset_minus;
115      jQuery('body,html').animate({
116        scrollTop: target_top
117      }, 800, 'swing');
118      if (win < breakpoint) {
119        sp_menu_pull.hide(animation_speed);
120      }
121      return false;

122    }
123  } else {
124    //
125  }
126}
127
128window.addEventListener( 'load', function(){
129  //jQuery(window).on('load', function (event) {
130  //jQuery("html, body").stop().scrollTop(0);
131  //外部リンクによるページ内リンクの処理
132  load_or_ready = inicial_func(load_or_ready, target, nav, sp_nav);
133});
134
135//内部リンクによるページ内リンクの処理 リンクにページのURLが含まれる場合
136jQuery("a[href^=http]").click(function (event) {
137  //alert("1 内部リンクによるページ内リンクの処理 リンクにページのURLが含まれる場合");
138  return anchor_func(nav, sp_nav, this);
139});
140
141//内部リンクによるページ内リンクの処理 リンクが#から始まる場合
142//「no_anchor」クラスを除外
143jQuery("a[href^='#']:not(a.no_anchor[href^='#']").click(function (event) {
144  //alert("2 内部リンクによるページ内リンクの処理 リンクが#から始まる場合");
145
146  let href = jQuery(this).attr('href');
147  let hash = href === '#' || href === '' ? 'html' : href;
148  if (href === '#') {
149    event.preventDefault();
150    return;
151  } else {
152
153    return anchor_func(nav, sp_nav, this);
154  }
155  //return anchor_func(nav, sp_nav, this);
156});
157
158var currentWidth = window.innerWidth;
159
160if(currentWidth < breakpoint) {
161  window.addEventListener("resize", function () {
162    if (currentWidth == window.innerWidth) {
163      // ウインドウ横幅が変わっていないため処理をキャンセル。
164      return;
165    }
166    currentWidth = window.innerWidth;
167    var win = window.innerWidth;
168    if (breakpoint <= win) {
169      menu_bk.hide(animation_speed);
170      jQuery('.global_nav .sub-menu,.global_nav .sub-menu_wrap').css('display', '');
171      //nav_padding_body.css('margin-top', '');
172    }
173  });
174} else {
175  window.addEventListener("resize", function () {
176    if (currentWidth == window.innerWidth) {
177      // ウインドウ横幅が変わっていないため処理をキャンセル。
178      return;
179    }
180    currentWidth = window.innerWidth;
181    var win = window.innerWidth;
182    if (win < breakpoint) {
183      menu_bk.hide(animation_speed);
184      jQuery('.global_nav .sub-menu,.global_nav .sub-menu_wrap').css('display', '').css('max-height', '');
185      menu_a.removeClass('onclick');
186      jQuery('.global_nav .sub-menu_wrap').css('max-height', '');
187
188    }
189  });
190}
191
192// ナビゲーションの親にクラスをつける
193menu_item_has_children.add(menu_item_has_children_wrap).addClass(submenu_wrap_class); 
194menu_item_has_children_wrap.addClass(submenu_wrap_class_wide);
195
196// PCナビゲーション
197jQuery(window).on('load resize', function () {
198  var win = window.innerWidth;
199  if (breakpoint <= win) {
200    jQuery(sp_menu_pull).css('display', ''); // リサイズ時と読み込み時にメニューのスタイルを解除
201    jQuery(sp_menu_pull).css('top', '');
202
203    var windowHeight = window.innerHeight;
204    var headerHeight = jQuery('.header').outerHeight(true); 
205    var glovalnavHeight = jQuery('.global_nav').outerHeight(true); 
206    if(pc_horizon_flag) {
207      jQuery('.global_nav .sub-menu_wrap').css('max-height', windowHeight - headerHeight ).css('top',glovalnavHeight );
208    } else {
209      jQuery('.global_nav .sub-menu_wrap').css('max-height', windowHeight -headerHeight - glovalnavHeight);
210    }
211  }
212});
213
214var pc_menu_li = jQuery(pc_menu).children('li');//
215jQuery(pc_menu_li).on({
216  'mouseenter': function () {
217    var win = window.innerWidth;
218    if (breakpoint <= win) {
219      jQuery(this).addClass('active');
220      if(jQuery(this).hasClass(submenu_wrap_class)) {
221        //jQuery(this).children('a').next().stop(true, true).slideDown('fast','swing');
222      }
223    }
224  }, 
225  'mouseleave': function () {
226    var win = window.innerWidth;
227    if (breakpoint <= win) {
228      jQuery(this).removeClass('active');
229      if(jQuery(this).hasClass(submenu_wrap_class)) {
230        //jQuery(this).children('a').next().stop(true, true).slideUp('fast');
231      }
232    }
233  }
234});
235
236//SPナビゲーション
237var navlinkparent = jQuery('.menu-item-has-children > .sub-menu').parent('li');
238var navlinkparentwrap = jQuery('.sub-menu_wrap').parent('li');
239var navlink = jQuery(navlinkparent).add(navlinkparentwrap).children('a');
240var subnavlink = jQuery('.sub-menu a');
241jQuery(sp_toggle).on('click', function () {
242  let fixdheader = document.getElementById('global_nav');
243  if(id_header_pcsp_horizon === true || id_header_pc_horizon === true) {
244    fixdheader = document.getElementById('header');
245  }
246  fixdheader.style.transform = '';
247
248  jQuery(sp_menu_pull).fadeToggle().toggleClass('open');
249  jQuery(menu_bk).fadeIn(animation_speed);
250  jQuery(body).toggleClass('overflow-y');
251  jQuery(sp_close).fadeIn(animation_speed);
252  jQuery('.menu-item-has-children > .sub-menu,.menu-item-has-children > .sub-menu_wrap').hide();
253});
254jQuery(menu_bk).on('click', function () {
255  jQuery(this).fadeOut();
256  jQuery(sp_menu_pull).fadeOut().removeClass('open');
257  jQuery(sp_close).fadeOut();
258  setTimeout(function(){
259    jQuery(body).removeClass('overflow-y');
260  },animation_speed);
261});
262jQuery(sp_close).on('click', function () {
263  var win = window.innerWidth;
264  if (win < breakpoint ) {
265    jQuery(sp_menu_pull).fadeOut().removeClass('open');
266    //jQuery(submenu_class).css('display','');
267    jQuery(menu_bk).fadeOut();
268    jQuery(sp_close).fadeOut();
269    setTimeout(function(){
270      jQuery(body).removeClass('overflow-y');
271    },animation_speed);
272  }
273});
274
275jQuery(navlink).on('click', function () {
276  var win = window.innerWidth;
277  if (win < breakpoint) {
278    jQuery(this).toggleClass('onclick');
279    jQuery(this).next().slideToggle();
280    return false;

281  }
282});
283jQuery(subnavlink).on('click', function () {
284  var win = window.innerWidth;
285  if (win < breakpoint) {
286    jQuery(this).parents('.menu-item').children('a').toggleClass('onclick');
287    //jQuery('.menu-item-has-children > .sub-menu,.menu-item-has-children > .sub-menu_wrap').hide();
288    jQuery(sp_menu_pull).fadeOut().removeClass('open');
289    jQuery(menu_bk).fadeOut();
290    jQuery(sp_close).fadeOut();
291    setTimeout(function(){
292      jQuery(body).removeClass('overflow-y');
293    },animation_speed);
294  } else {
295    jQuery('.menu-item-has-children').removeClass('active');
296  }
297});
298jQuery('.global_nav a[href*="#"]').on('click', function () {
299  var win = window.innerWidth;
300  if (win < breakpoint) {
301    jQuery(sp_menu_pull).fadeOut().removeClass('open');
302    jQuery(menu_bk).fadeOut();
303    jQuery(sp_close).fadeOut();
304    setTimeout(function(){
305      jQuery(body).removeClass('overflow-y');
306    },animation_speed);
307  }
308});
309
310// PC hoverで開閉するヘッダーアイテム
311const isHover = window.matchMedia("(any-hover:hover)").matches;
312function header_hover_item_open(e) {
313  e.currentTarget.classList.add('active');
314}
315function header_hover_item_close(e) {
316  e.currentTarget.classList.remove('active');
317}
318function header_hover_item_toggle(e) {
319  e.currentTarget.classList.toggle('active');
320}
321for( let i = 0 ; i < header_hover_item.length ; i ++ ) {
322  if(isHover) {
323    header_hover_item[i].addEventListener('mouseenter', header_hover_item_open);
324    header_hover_item[i].addEventListener('mouseleave', header_hover_item_close);
325  } else {
326    header_hover_item[i].addEventListener('click', header_hover_item_toggle);
327    header_hover_item[i].addEventListener('mouseleave', header_hover_item_close);
328  }
329}
330
331// ヘッダー・ナビ position:fixd 追従用スクリプト
332const body_home = document.body.classList.contains('home');
333const id_header = document.getElementById('header');
334const header_nav_wrap = id_header.classList.contains('header_nav_wrap');
335const id_header_pcsp_horizon = id_header.classList.contains('pcsp_horizon');
336const id_header_pc_horizon = id_header.classList.contains('pc_horizon');
337let fixdheader = document.getElementById('global_nav');
338if(id_header_pcsp_horizon === true || id_header_pc_horizon === true) {
339  fixdheader = document.getElementById('header');
340}
341window.onload = function () {
342  let navoffsetTop = 0;
343  if(body_home === true && header_nav_wrap === true ) {
344    const id_nav = document.getElementById('global_nav');  
345    var rect = id_nav.getBoundingClientRect();
346    var scrollTop = window.scrollY || document.documentElement.scrollTop;
347    navoffsetTop = rect.top + scrollTop;
348  }
349
350  window.addEventListener("scroll", () => {
351    // fixed クラス追加
352    let winWidth = window.innerWidth;
353    if(body_home === true && header_nav_wrap === true ) {
354      if(window.scrollY > navoffsetTop ) {
355        if (breakpoint <= winWidth) {
356          fixdheader.classList.add(fixed_class);
357        }
358      } else {
359        if (breakpoint <= winWidth) {
360          fixdheader.classList.remove(fixed_class);
361        }
362      }
363    }
364
365    // ブラウザ幅が縮まった時 fixed した要素に translateX を付与
366    const scrollX = window.scrollX;
367    if (fixdheader) {
368      const isSticky = window.getComputedStyle(fixdheader).position === 'sticky';
369      if (!isSticky) {
370        fixdheader.style.transform = `translateX(-${scrollX}px)`;
371      } else {
372        fixdheader.style.transform = '';
373      }
374    }
375  });
376}