https://zen-p.net/js/main_end.js

1/*===========================================================================*/
2/*#menubar
3/*同一ページへのリンクの場合に開閉メニューを閉じる処理
4/*===========================================================================*/
5$(function() {
6	$('#menubox a[href^="#"]').click(function() {
7		$('#menuboxr').removeClass('db');
8		$('#menubox_hdr').removeClass('ham');
9	});
10});
11/*===========================================================================*/
12/*#menubar_hdr
13/*ハンバーガーメニューをクリックした際の処理
14/*===========================================================================*/
15$(function() {
16	$('#menubox_hdr').click(function() {
17		$(this).toggleClass('ham');
18			if($(this).hasClass('ham')) {
19				$('#menubox').addClass('db').removeClass('dn');
20			} else {
21				$('#menubox').addClass('dn').removeClass('db');
22			}
23	});
24});
25/*===========================================================================*/
26//ページ内を可変スクロール
27/*2024/07/27
28/*https://coco-factory.jp/ugokuweb/move01/8-2-1/
29/*===========================================================================*/
30/*$('.link_guide a[href*="#"]').click(function () {//ページ内全リンクに適用時は、a[href*="#"]のみ*/
31/*=
32$('a[href*="#"]').click(function () {//ページ内全リンクに適用時は、a[href*="#"]のみ*/
33/*=	$('a[href^="#"]:not(.)').on('click',function(){ //clearbox inline対応として追記 241202
34/*=		var elmHash = $(this).attr('href'); //ページ内リンクのHTMLタグhrefから、リンクされているエリアidの値を取得
35/*=		var pos = $(elmHash).offset().top;	//idの上部の距離を取得
36/*=		$("body,html").animate({scrollTop: pos}, 500 ,"swing");//"linear swing"
37	return false;
38	});
39});
40以下は差し替え20260326*/
41
42$('a[href^="#"]').on('click', function() {
43	var elmHash = $(this).attr('href');
44	var target = $(elmHash);
45
46	if(target.length) {
47		var pos = target.offset().top;
48		$('body,html').animate({scrollTop: pos}, 500, 'swing');
49	}
50	return false;
51});
52
53/*===========================================================================*/
54//スクロール位置調整
55/*===========================================================================*/
56/*
57$(window).on('load', function() {
58	var hash = location.hash;
59	if(hash) {
60		$('body,html').scrollTop(0);
61		setTimeout(function() {
62			var target = $(hash);
63			var scroll = target.offset().top - 40;
64			$('body,html').animate({scrollTop:scroll},50);  //速度 スクロールとあわせるなら500
65		}, 100);
66	}
67});
68$(window).on('load', function() {
69	$('a[href^="#"]').click(function() {
70		var href = $(this).attr('href');
71		var target = href == '#' ? 0 : $(href).offset().top - 40;
72				$('body,html').animate({scrollTop:target},50);  //速度 スクロールとあわせるなら500
73				return false;
74	});
75});
76
77/*===========================================================================*/
78//タイマー
79/*===========================================================================*/
80$(function() {
81	var timer = false;
82	$(window).resize(function() {
83		if(timer !== false){
84			clearTimeout(timer);
85		}
86		timer = setTimeout(function() {
87		}, 500);
88	});
89});
90
91
92/*===========================================================================*/
93// 汎用開閉処理
94/*===========================================================================*/
95$(function() {
96	$('.openclose').next().hide();
97	$('.openclose').click(function() {
98		$(this).next().slideToggle();
99		$('.openclose').not(this).next().slideUp();
100	});
101});
102
103
104/*===========================================================================*/
105//series_naviでセンター表示
106/*===========================================================================*/
107$(window).on('load', function() {
108	$('.series_navi_scroll').each(function() {
109		const scrollBox = this;
110		const current =
111			scrollBox.querySelector('.series_navi.current') ||
112			scrollBox.querySelector('.series_navi a.current');
113
114		if(current) {
115			const card = current.closest('.series_navi');
116			if(!card) return;
117
118			const boxRect = scrollBox.getBoundingClientRect();
119			const cardRect = card.getBoundingClientRect();
120
121			const scrollLeft =
122				scrollBox.scrollLeft
123				+ (cardRect.left - boxRect.left)
124				- (scrollBox.clientWidth / 2)
125				+ (cardRect.width / 2);
126
127			scrollBox.scrollLeft = Math.max(0, scrollLeft);
128		}
129	});
130});
131
132
133/*===========================================================================*/
134//特定のIDを過ぎたらバナーを表示して後に閉じる（ブラウザの色も変える)*/
135/*===========================================================================*/
136document.addEventListener('DOMContentLoaded', () => {
137    const startTrigger = document.getElementById('start_fixing_point');
138    const endTrigger = document.getElementById('end_fixing_point');
139    const banner = document.getElementById('fixed-banner');
140    const metaTheme = document.getElementById('browser-theme-color');
141
142    if (!startTrigger || !banner) return;
143
144    // CSSから色を自動取得（汎用性維持）
145    const activeColor = getComputedStyle(banner).backgroundColor;
146    const defaultColor = "#ffffff";
147
148    const checkDisplay = () => {

149        // 各要素の現在の位置を取得
150        const startRect = startTrigger.getBoundingClientRect();
151        const endRect = endTrigger ? endTrigger.getBoundingClientRect() : null;
152
153        // 条件：
154        // ① 開始地点が画面のトップより上にある（通り過ぎている）
155        // ② 終了地点が指定されている場合、終了地点がまだ画面のトップより下にある
156        const isPastStart = startRect.top <= 0;
157        const isBeforeEnd = endRect ? endRect.top > 0 : true;
158
159        if (isPastStart && isBeforeEnd) {
160            banner.classList.add('is_active');
161            if (metaTheme) metaTheme.setAttribute('content', activeColor);
162        } else {
163            banner.classList.remove('is_active');
164            if (metaTheme) metaTheme.setAttribute('content', defaultColor);
165        }
166    };
167
168    // スクロール時と画面サイズ変更時に判定を実行
169    window.addEventListener('scroll', checkDisplay);
170    window.addEventListener('resize', checkDisplay);
171    
172    // 初回読み込み時にも一度チェック
173    checkDisplay();
174});