https://service.nexyz-zero.jp/js/common/script.js

1$(function(){
2
3	let header = $('#g-header');
4	let headerHeight = header.outerHeight();
5	$(window).on('resize', function (){
6		headerHeight = header.outerHeight();
7	});
8
9	// アンカースクロール
10	let speed = 300;
11	let hash = $(location.hash);
12	let exclusion = headerHeight + 10;	// スクロール先から除外する値
13	if(hash.length){
14		$('html, body').animate({scrollTop: hash.offset().top - exclusion}, speed, 'swing');
15	}
16	$('a.back-to-top, a[href*="#"]').not('[href="#"]').on('click', function(){
17		let href = $(this).attr('href').replace('/', '');
18		if(href.length !== 0){
19			let target = $(href === '#' || href === '' ? 'html' : href);
20			let position = target.offset().top - exclusion;
21			$('html, body').animate({scrollTop: position}, speed, 'swing');
22		}
23		return false;
24	});
25
26	// 表示中のページとナビゲーションリンクの一致確認
27	let requestURI = location.pathname;
28	$('#g-header ul.navigation > li, #sp-navigation .navbar-nav').each(function(i, el){
29		$(el).find('a').each(function(){
30			let href =  $(this).attr('href');
31			let naviDir = '/' + href	// リンクからパス部分を抽出
32				.replace(/^.+:\/\//, '')	// プロトコル表記削除
33				.split('/')	// ディレクトリのデリミタで区切り配列化
34				.filter(Boolean)	// 空白削除
35				.filter(function(e){return e !== location.hostname})	// ホスト部分を削除
36				.join('/')	// 文字列として連結
37				.split('#')	// ハッシュのデリミタで区切り配列化
38				.shift()	// 最初の要素（ハッシュ以外）を文字列として返す
39			;
40			if(href === requestURI || naviDir === requestURI || (naviDir !== '' && naviDir !== '/' && location.pathname.indexOf(naviDir) !== -1)){
41				$(this).addClass('current');
42				return false;
43			}
44		});
45	});
46
47	/* Sticky Header */
48	let body = $('body');
49	let fixedClass = 'sticky';
50	let headerPosition;
51	let scrollPosition = 0;
52	let scrollDiff = 0;
53	// let buffer = 0;
54	let heightAdjust;
55
56	$(window).on('load', function (){
57		headerPosition = header.offset().top + headerHeight;
58		if(headerPosition <= $(window).scrollTop()){
59			body.addClass(fixedClass);
60		}
61
62		heightAdjust = $(document).height()/headerPosition; // ドキュメントの高さとヘッダの高さの割合（係数）
63	});
64
65	$(window).on('scroll', function(){
66		if(!$('.sp.navbar .navbar-toggler').hasClass('collapsed')){ // スマホメニュー表示時はスキップ
67			return;
68		}
69
70		// スクロール差分取得
71		if(scrollPosition !== 0){ // スクロール継続時
72			scrollDiff = scrollPosition - $(window).scrollTop();
73		}
74		scrollPosition = $(window).scrollTop();
75
76		let headerPositionAdjusted = headerPosition;
77		if(scrollDiff > 0){  // スクロールが下から上へ戻るケース
78			// headerPositionを調整
79			headerPositionAdjusted = headerPosition - 160;
80		}
81
82		// スクロール速度係数から設定
83		// buffer = heightAdjust*(Math.abs(scrollDiff)); // スクロール差分は絶対値に変換してから算出
84
85		// Sticky class設定
86		if(0 === scrollPosition || (0 <= scrollPosition && scrollPosition <= headerPositionAdjusted)){
87			body.removeClass(fixedClass+'-on').removeClass(fixedClass);
88		}
89		else if(
90			headerPositionAdjusted < scrollPosition	// スクロール位置がヘッダ調整範囲より大きい
91			&& headerPosition < scrollPosition	// スクロール位置がヘッダ範囲より大きい
92			// && scrollPosition < headerPositionAdjusted + buffer	// スクロール位置がヘッダ調整範囲+バッファより小さい
93		){
94			body.addClass(fixedClass);
95		}
96	});
97
98	// sticky-onクラスを付与 （画面途中でリロードされた場合も若干のディレイ後にヘッダを表示）
99	setInterval(function(){
100		if(headerPosition <= $(window).scrollTop() && !body.hasClass(fixedClass+'-on')){
101			body.addClass(fixedClass+'-on');
102		}
103	},800);
104
105	// Back to Top
106	let backToTop = $('.back-to-top');
107	backToTop.hide();
108	$(window).on("scroll", function(){
109		// スクロール位置が以下よりも小さい場合に以下の処理をする
110		if($(this).scrollTop() > 500){
111			// (小さい時は)ページトップボタンをフェードイãƒ

111³
112			backToTop.fadeIn(500, 'swing');
113		}
114		else{
115			// それ以外の場合の場合はフェードアウトする。
116			backToTop.fadeOut(800, 'linear');
117		}
118	});
119
120	// フッター固定
121	$(window).on("scroll", function(){
122		// ドキュメントの高さ
123		let scrollHeight = $(document).height();
124		// ウィンドウの高さ+スクロールした高さ → 現在のトップからの位置
125		scrollPosition = $(window).height() + $(window).scrollTop();
126		// フッター + padding + border の高さ
127		let footHeight = $("#g-footer").height();
128		// 現在の下から位置が、フッターの高さの位置にはいったら
129		if(scrollHeight - scrollPosition <= footHeight ){
130			// ".back-to-top"のpositionをabsoluteに変更し、フッターの高さの位置にする
131			// "bottom"の指定は親要素からみた数値にかえて下さい
132			backToTop.css({
133				"position": "absolute",
134				"bottom": "-10px",
135				"right": "30px",
136			}).removeClass(fixedClass+'-fixed');
137		}
138		else {
139			// それ以外の場合は元のcssスタイルを指定
140			backToTop.css({
141				"position":"fixed",
142				"right": "30px",
143				"bottom": "10px"
144			}).addClass(fixedClass+'-fixed');
145		}
146	});
147
148});