https://apollo-skin.com/js/jQ.js

1// JavaScript Document
2
3
4// Global ----------------------------------------
5
6const windowWidth = $(window).width(); // ウィンドウ幅取得
7const windowSm = 768; // ブレイクポイント
8
9
10// 電話番号 ----------------------------------------
11
12if(navigator.userAgent.match(/(iPhone|iPad|Android|Mobile)/)){
13  $('.tel').each(function(){
14    const str = $(this).html();
15    if($(this).children().is('img')){
16      $(this).html($('<a>').attr('href', 'tel:' + $(this).children().attr('alt').replace(/-/g, '')).append(str + '</a>'));
17    } else {
18      $(this).html($('<a>').attr('href', 'tel:' + $(this).text().replace(/-/g, '')).append(str + '</a>'));
19    }
20  });
21}
22
23
24// トリガーで出てくる要素 ----------------------------------------
25
26$(window).on('scroll load', function(){
27 $('.anime').each(function(){
28   const imgPos = $(this).offset().top;
29   const scroll = $(window).scrollTop();
30   const windowHeight = $(window).height();
31   if(scroll > imgPos - windowHeight + windowHeight/5){
32     $(this).addClass('trigger')
33   }
34 });
35});
36
37
38// Gナビ ----------------------------------------
39
40$('#nav #sp_menu').on('click', function(){ // SPハンバーガーモーダル
41  $('html, body').toggleClass('spnav_modal');
42  $(this).toggleClass('close');
43  $('#nav .gnav_subnav').slideToggle();
44  return false;
45});
46$('#nav #menu_close').click(function(){ // とじるボタン
47  $('html, body').removeClass('spnav_modal');
48  $('#nav #sp_menu').removeClass('close');
49  $('#nav .gnav_subnav').slideUp();
50  return false;
51});
52
53// ハンバーガー内　スクロール処理
54const setVh = () => {
55  const vh = window.innerHeight * 0.01;
56  document.documentElement.style.setProperty('--vh', `${vh}px`);
57}
58window.addEventListener('load', setVh);
59
60// ハンバーガー内　リサイズ処理
61let vw = window.innerWidth;
62window.addEventListener('resize', () => {
63  if (vw === window.innerWidth) {
64    return; // 画面の横幅にサイズ変動がないので処理を終える
65  }
66  // 画面の横幅のサイズ変動があった時のみ高さを再計算する
67  vw = window.innerWidth;
68  setVh();
69});
70setVh(); // 初期化
71
72// 診療内容ドロップダウンメニュー
73if(windowWidth < windowSm){ // スマホは診療内容を開いておく
74 $('#nav .sub').addClass('close');
75}
76$('#nav .sub').click(function(){
77  $(this).toggleClass('close').next('#nav .subbox').slideToggle();
78  if(windowWidth >= windowSm){ // PCの場合
79    $('#nav .sub').not(this).removeClass('close').next('#nav .subbox').slideUp();
80  }
81  return false;
82});
83
84// エリア外クリックで閉じる
85$(window).on('click', function(e){
86  if(windowWidth < windowSm){ // スマホの場合
87    if($('.spnav_modal').is(':visible')){
88      if(!$(e.target).closest('#nav .gnav_subnav').length){
89        $('html, body').removeClass('spnav_modal');
90        $('#nav #sp_menu, #nav #menu_close').removeClass('close');
91        $('#nav .gnav_subnav').slideUp();
92      }
93    }
94  } else { // PCの場合
95    $('html, body').removeClass('spnav_modal');
96    if($('#nav .subbox').is(':visible')){
97      if(!$(e.target).closest('#nav').length){ // タブレット対応
98        $('#nav .sub').removeClass('close');
99        $('#nav .subbox').slideUp();
100      }
101    }
102  }
103});
104
105
106
107// カレントメニュー処理 ----------------------------------------
108
109const currentURL = location.href; // URL取得
110$('#nav .current, .subnav .current').removeClass('current');
111$('#nav a, .subnav a').filter(function(){
112  return $(this).prop('href')==currentURL;
113}).addClass('current');
114
115
116
117// トップ　キービジュアル　slick ----------------------------------------
118
119$('#keyvsl').slick({
120  cssEase: 'linear', // 一定速度
121  autoplay: true, // Autoplay
122  autoplaySpeed: 5000, // インターバル
123  speed: 700, // 切替時間
124  arrows: false, // Prev/Next
125  dots: false, // インジケーター
126  fade: true,
127  pauseOnFocus: false,//フォーカスで一時停止
128  pauseOnHover: false,//マウスホバーで一時停止
129  pauseOnDotsHover: false//ドットナビをマウスホバーで一時停止
130});
131$('#keyvsl').delay(50).css('visibility','visible');
132
133
134// トップ　お知らせ　アコーディオン ----------------------------------------
135
136$('.news_title').slice(0, 3).addClass('close'); // 最新3個は展開
137$('.news_title').click(function(){
138  $(this).toggleClass('close').next('.news_body').slideToggle();
139});
140$('.news_title').keydown(function(evt){ // キーボード操作
141  if (evt.key == 'Enter') { // Enterキーで開閉
142    $(this).toggleClass('close').next('.news_body').slideToggle();
143  }
144});
145
146
147// クリニック紹介ギャラリー slick ----------------------------------------
148
149// $(".gallery_slider").each(function(){ // メイン画像
150//   $(this).slick({

151//     cssEase: 'linear', // 一定速度
152// //    autoplay: true, // Autoplay
153// //    autoplaySpeed: 5000, // インターバル
154//     dots: true, // インジケーター
155//     fade: true,
156//     speed: 500, // 切替時間
157//     adaptiveHeight: true, // 内容によって高さ可変
158//     asNavFor: "#" + $(this).attr("id") + "_nav" // 複数スライド対応
159//   });
160// });
161// $(".gallery_thum").each(function(){ // サムネ
162//   $(this).slick({
163//     slidesToShow: 7,
164//     slidesToScroll: 1,
165//     centerMode: true,
166//     centerPadding: 0,
167//     arrows: false, // Prev/Next
168//     cssEase: 'linear', // 一定速度
169//     focusOnSelect: true, // クリックで切り替え
170//     asNavFor: "#" + $(this).attr("id").replace("_nav", ""), // 複数スライド対応
171//     responsive: [{
172//       breakpoint: 767, // スマホの場合
173//       settings: {
174//         slidesToShow: 3,
175//       },},
176//     ]
177//   });
178// });
179// $('.gallery').delay(50).css('visibility','visible');
180
181
182// スティッキーヘッダー　スクロール処理 ----------------------------------------
183
184const body_height = $(document).innerHeight(); // ページ全体の高さ
185const win_height = $(window).innerHeight(); // ウィンドウの高さ
186let pos_bottom = body_height - win_height; // ページの最下部位置
187let pos_scr = 0; // スクロールの位置を初期化
188const sp_header = $('.header .logo, #sp_menu');
189const pc_header = $('.header, .subbox');
190const sticky = $('.main').offset().top;
191$(window).on('load scroll', function() {
192  if(windowWidth < windowSm){ // スマホの場合
193    if($(this).scrollTop() < pos_scr){ // 上スクロール
194      sp_header.removeClass('hide');
195    } else {
196      if(pos_scr >= 200){ // 下スクロール
197        sp_header.addClass('hide');
198      }
199    }
200    if(pos_bottom * 0.98 <= $(window).scrollTop()){ // 一番下まで行ったら出現
201      sp_header.removeClass('hide');
202    }
203  }
204  if(windowWidth >= windowSm){ // PCの場合
205    if($(this).scrollTop() > 20){ // 上スクロール
206      pc_header.addClass('header_small');
207    } else {
208      pc_header.removeClass('header_small');
209    }
210  }
211  pos_scr = $(this).scrollTop();
212});
213
214
215// スムーズスクロール ----------------------------------------
216
217$('.scr').click(function(){
218  const href= $(this).attr('href');
219  const target = $(href == '#' || href == '' ? 'html' : href);
220  const position = target.offset().top - 20;
221  $('html, body').animate({scrollTop: position}, 500, 'swing');
222  return false;
223});
224
225
226
227// SPフッター固定　電話・WEb予約・ページアップ ----------------------------------------
228
229$('#tel_up').hide();
230$(window).scroll(function(){
231  if($(this).scrollTop() > 200){
232    $('#tel_up').fadeIn().css('visibility', 'visible');
233  } else {
234    $('#tel_up').fadeOut();
235  }
236});
237$('#pageup').on('click', function(){
238  $('html, body').animate({ scrollTop: 0 }, 500, 'swing');
239  return false;
240});