https://uta-clinic.com/js/main.js

1
2//===============================================================
3// debounce関数
4//===============================================================
5function debounce(func, wait) {
6    var timeout;
7    return function() {
8        var context = this, args = arguments;
9        var later = function() {
10            timeout = null;
11            func.apply(context, args);
12        };
13        clearTimeout(timeout);
14        timeout = setTimeout(later, wait);
15    };
16}
17
18
19//===============================================================
20// メニュー関連
21//===============================================================
22
23// 変数でセレクタを管理
24var $menubar = $('#menubar');
25var $menubarHdr = $('#menubar_hdr');
26
27// menu
28$(window).on("load resize", debounce(function() {
29    if(window.innerWidth <= 900) {	// ここがブレイクポイント指定箇所です
30        // 小さな端末用の処理
31        $('body').addClass('small-screen').removeClass('large-screen');
32        $menubar.addClass('display-none').removeClass('display-block');
33        $menubarHdr.removeClass('display-none ham').addClass('display-block');
34    } else {
35        // 大きな端末用の処理
36        $('body').addClass('large-screen').removeClass('small-screen');
37        $menubar.addClass('display-block').removeClass('display-none');
38        $menubarHdr.removeClass('display-block').addClass('display-none');
39
40        // ドロップダウンメニューが開いていれば、それを閉じる
41        $('.ddmenu_parent > ul').hide();
42    }
43}, 10));
44
45$(function() {
46
47    // ハンバーガーメニューをクリックした際の処理
48    $menubarHdr.click(function() {
49        $(this).toggleClass('ham');
50        if ($(this).hasClass('ham')) {
51            $menubar.addClass('display-block');
52        } else {
53            $menubar.removeClass('display-block');
54        }
55    });
56
57    // アンカーリンクの場合にメニューを閉じる処理
58    $menubar.find('a[href*="#"]').click(function() {
59        $menubar.removeClass('display-block');
60        $menubarHdr.removeClass('ham');
61    });
62
63    // ドロップダウンの親liタグ（空のリンクを持つaタグのデフォルト動作を防止）
64	$menubar.find('a[href=""]').click(function() {
65		return false;
66	});
67
68	// ドロップダウンメニューの処理
69    $menubar.find('li:has(ul)').addClass('ddmenu_parent');
70    $('.ddmenu_parent > a').addClass('ddmenu');
71
72// タッチ開始位置を格納する変数
73var touchStartY = 0;
74
75// タッチデバイス用
76$('.ddmenu').on('touchstart', function(e) {
77    // タッチ開始位置を記録
78    touchStartY = e.originalEvent.touches[0].clientY;
79}).on('touchend', function(e) {
80    // タッチ終了時の位置を取得
81    var touchEndY = e.originalEvent.changedTouches[0].clientY;
82    
83    // タッチ開始位置とタッチ終了位置の差分を計算
84    var touchDifference = touchStartY - touchEndY;
85    
86    // スクロール動作でない（差分が小さい）場合にのみドロップダウンを制御
87    if (Math.abs(touchDifference) < 10) { // 10px以下の移動ならタップとみなす
88        var $nextUl = $(this).next('ul');
89        if ($nextUl.is(':visible')) {
90            $nextUl.stop().hide();
91        } else {
92            $nextUl.stop().show();
93        }
94        $('.ddmenu').not(this).next('ul').hide();
95        return false; // ドロップダウンのリンクがフォローされるのを防ぐ
96    }
97});
98
99    //PC用
100    $('.ddmenu_parent').hover(function() {
101        $(this).children('ul').stop().show();
102    }, function() {
103        $(this).children('ul').stop().hide();
104    });
105
106    // ドロップダウンをページ内リンクで使った場合に、ドロップダウンを閉じる
107    $('.ddmenu_parent ul a').click(function() {
108        $('.ddmenu_parent > ul').hide();
109    });
110
111});
112
113
114//===============================================================
115// 小さなメニューが開いている際のみ、body要素のスクロールを禁止。
116//===============================================================
117$(function() {
118  function toggleBodyScroll() {
119    // 条件をチェック
120    if ($('#menubar_hdr').hasClass('ham') && !$('#menubar_hdr').hasClass('display-none')) {
121      // #menubar_hdr が 'ham' クラスを持ち、かつ 'display-none' クラスを持たない場合、スクロールを禁止
122      $('body').css({
123        overflow: 'hidden',
124        height: '100%'
125      });
126    } else {
127      // その他の場合、スクロールを再び可能に
128      $('body').css({
129        overflow: '',
130        height: ''
131      });
132    }
133  }
134
135  // 初期ロード時にチェックを実行
136  toggleBodyScroll();
137
138  // クラスが動的に変更されることを想定して、MutationObserverを使用

139  const observer = new MutationObserver(toggleBodyScroll);
140  observer.observe(document.getElementById('menubar_hdr'), { attributes: true, attributeFilter: ['class'] });
141});
142
143
144//===============================================================
145// スムーススクロール（※バージョン2024-7）※#menubarの高さを取得する場合
146//===============================================================
147$(function() {
148    // ページトップボタンの表示・非表示
149    var scroll = $('.pagetop');
150    var scrollShow = $('.pagetop-show');
151    $(scroll).hide();
152    $(window).scroll(function() {
153        if ($(this).scrollTop() >= 300) {
154            $(scroll).fadeIn().addClass(scrollShow);
155        } else {
156            $(scroll).fadeOut().removeClass(scrollShow);
157        }
158    });
159
160    // スムーススクロール
161    function smoothScroll(target) {
162        var menubarHeight = 0; // 初期値
163        if ($('body').hasClass('large-screen')) {
164            menubarHeight = $('#menubar').outerHeight(); // .large-screenクラスがある場合に#menubarの高さを取得
165        }
166        var scroll = target.offset().top - menubarHeight; // 高さを考慮してスクロール位置を調整
167        $('body,html').animate({ scrollTop: scroll }, 500);
168    }
169
170    // ページトップボタンのクリックイベント
171    $('.pagetop').click(function(e) {
172        e.preventDefault();
173        $('body,html').animate({ scrollTop: 0 }, 500);
174    });
175
176    // ページ読み込み時のハッシュ処理
177    $(window).on('load', function() {
178        var hash = location.hash;
179        if (hash) {
180            $('body,html').scrollTop(0);
181            setTimeout(function() {
182                var target = $(hash);
183                if (target.length) {
184                    smoothScroll(target);
185                }
186            }, 100);
187        }
188    });
189
190    // リンククリック時のスムーススクロール
191    $(window).on('load', function() {
192        $('a[href*="#"]').click(function(e) {
193            var href = $(this).attr('href');
194            var targetId = href.split('#')[1]; // ハッシュ部分だけを取り出す
195            var target = $('#' + targetId);
196            if (target.length) {
197                e.preventDefault();
198                smoothScroll(target);
199                history.pushState(null, null, '#' + targetId); // ハッシュをURLに追加
200            }
201        });
202    });
203});
204
205
206
207//===============================================================
208// 汎用開閉処理
209//===============================================================
210$(function() {
211	$('.openclose-parts').next().hide();
212	$('.openclose-parts').click(function() {
213		$(this).next().slideToggle();
214		$('.openclose-parts').not(this).next().slideUp();
215	});
216});
217
218
219//===============================================================
220// 詳細ページのサムネイル切り替え
221//===============================================================
222$(function() {
223    // 初期表示: 各 .thumbnail-view に対して、直後の .thumbnail の最初の画像を表示
224    $(".thumbnail-view-parts").each(function() {
225        var firstThumbnailSrc = $(this).next(".thumbnail-parts").find("img:first").attr("src");
226        var defaultImage = $("<img>").attr("src", firstThumbnailSrc);
227        $(this).append(defaultImage);
228    });
229
230    // サムネイルがクリックされたときの動作
231    $(".thumbnail-parts img").click(function() {
232        var imgSrc = $(this).attr("src");
233        var newImage = $("<img>").attr("src", imgSrc).hide();
234
235        // このサムネイルの直前の .thumbnail-view 要素を取得
236        var targetPhoto = $(this).parent(".thumbnail-parts").prev(".thumbnail-view-parts");
237
238        targetPhoto.find("img").fadeOut(400, function() {
239            targetPhoto.empty().append(newImage);
240            newImage.fadeIn(400);
241        });
242    });
243});
244
245
246//===============================================================
247// スライドショー
248//===============================================================
249$(function() {
250	var slides = $('#mainimg .slide');
251	var slideCount = slides.length;
252	var currentIndex = 0;
253
254	slides.eq(currentIndex).css('opacity', 1).addClass('active');
255
256	setInterval(function() {
257		var nextIndex = (currentIndex + 1) % slideCount;
258		slides.eq(currentIndex).css('opacity', 0).removeClass('active');
259		slides.eq(nextIndex).css('opacity', 1).addClass('active');

260		currentIndex = nextIndex;
261	}, 5000); // 5秒ごとにスライドを切り替える
262});
263
264
265//===============================================================
266// メニューにfixedクラスを付与
267//===============================================================
268document.addEventListener("DOMContentLoaded", function() {
269    const menubar = document.getElementById('menubar');
270    const triggerPoint = document.getElementById('trigger-point');
271    let fixedTimeout;
272
273    const handleIntersection = debounce(function(entries) {
274        entries.forEach(entry => {
275            if (!entry.isIntersecting) {
276                menubar.classList.add('fixed');
277                fixedTimeout = setTimeout(() => {
278                    menubar.classList.add('fixed2');
279                }, 1500); // 1.5秒後にfixed2を追加
280            } else {
281                menubar.classList.remove('fixed');
282                menubar.classList.remove('fixed2');
283                clearTimeout(fixedTimeout); // タイマーをクリアしてfixed2の追加を防止
284            }
285        });
286    }, 100); // 適宜待機時間を調整
287
288    const observer = new IntersectionObserver(handleIntersection, {
289        root: null,
290        threshold: 0
291    });
292
293    observer.observe(triggerPoint);
294});
295
296
297//===============================================================
298// 汎用開閉処理
299//===============================================================
300$(function() {
301	$('.openclose').next().hide();
302	$('.openclose').click(function() {
303		$(this).next().slideToggle();
304		$('.openclose').not(this).next().slideUp();
305	});
306});