https://media.okasan.co.jp/assets/oks/js/main.js

1$(function(){
2	//header
3	let header = $('.l-header');
4	let menu = $('.l-menu');
5	let headerNews = $('.l-header__top-news-btn');
6	let headerSearch = $('.l-header__top-search');
7	let searchInput = $('.l-menu__search-input');
8	let searchClear = $('.l-menu__search-clear');
9	let headerItem = $('.l-header__item--menu a');
10	let menuTrigger = $('.l-header__top-btn');
11	let menuNav = $('.l-menu__nav');
12	let menuBlock = $('.l-menu__block');
13	let menuAcd = $('.l-menu__block-ttl--acd');
14	let menuSearch = $('.l-menu__search');
15	let menuNews = $('.l-header__top-news-drop');
16	let overlay = $('.l-overlay');
17	let hoverIndex;
18	let hoverItem = headerItem.parent();
19	let hoverFirst = false;
20
21	let bodyState = false;
22	let newsState = false;
23	let searchState = false;
24	let menuState = false;
25	function bodyScroll(){
26		if(bodyState == false){
27			pos = $(window).scrollTop();
28			$('body').addClass('is-fixed').css({'top': -pos});
29			bodyState = true;
30		}else{
31			$('body').removeClass('is-fixed').css({'top': 0});
32			window.scrollTo(0, pos);
33			bodyState = false;
34		}
35	}
36
37	//横スクロール
38	$(window).on('scroll', function(){
39		header.css('left', -$(window).scrollLeft());
40	});
41	//searchバツボタン
42	searchClear.on('click',function(){
43		searchInput.val('');
44	});
45	if(window.matchMedia("(max-width: 767px)").matches){
46		//sp
47		//news
48		headerNews.on('click',function(){
49			newsFunction();
50		});
51		function newsFunction(){
52			if(searchState){
53				searchFunction();
54			}else if(menuState){
55				menuFunction();
56			}
57			headerNews.toggleClass('is-active');
58			menuNews.slideToggle();
59			overlay.stop().fadeToggle();
60			bodyScroll();
61			newsState = !newsState;
62		}
63
64		//search
65		headerSearch.on('click',function(){
66			searchFunction()
67			return false;
68		});
69		function searchFunction(){
70			if(menuState){
71				menuFunction();
72			}else if(newsState){
73				newsFunction();
74			}
75			headerSearch.toggleClass('is-active');
76			menuSearch.slideToggle();
77			overlay.stop().fadeToggle();
78			bodyScroll();
79			searchState = !searchState;
80		}
81
82		//menu
83		menuTrigger.on('click',function(){
84			menuFunction();
85		});
86		function menuFunction(){
87			if(searchState){
88				searchFunction();
89			}else if(newsState){
90				newsFunction();
91			}
92			menuTrigger.toggleClass('is-active');
93			menuNav.slideToggle();
94			overlay.stop().fadeToggle();
95			bodyScroll();
96			menuState = !menuState;
97		}
98
99		//overlay
100		overlay.on('click',function(){
101			if(menuState){
102				menuFunction();
103			}else if(searchState){
104				searchFunction();
105			}else if(newsState){
106				newsFunction();
107			}
108		});
109
110		//menu アコーディオン
111		menuAcd.on('click',function(){
112			$(this).next().slideToggle();
113			$(this).toggleClass('is-active');
114			return false;
115		});
116	}else{ 
117		//pc
118		//search
119		headerSearch.on('click',function(){
120			menuSearch.stop().slideToggle(300);
121			headerSearch.toggleClass('is-hover');
122			overlay.stop().fadeToggle(300);
123			return false;
124		});
125		headerSearch.mouseover(function(){
126			menuSearch.stop().slideDown(300);
127			headerSearch.addClass('is-hover');
128			overlay.stop(true,false).fadeIn(300);
129		});
130		header.mouseleave(function(){
131			//hoverを外したらsearchを非表示
132			menuSearch.stop().slideUp(300);
133			headerSearch.removeClass('is-hover');
134			overlay.stop().fadeOut(300);
135		});
136	
137		//menu
138		headerItem.mouseover(function(){
139			if(hoverFirst){
140				hoverItem.removeClass('is-hover');
141			}
142			menuBlock.removeClass('is-front');
143			menuBlock.stop(true,false).slideUp(300);
144			hoverIndex = headerItem.index(this);
145			hoverItem = $(this).parent();
146			menuBlock.eq(hoverIndex).stop().slideDown(300);
147			menuBlock.eq(hoverIndex).addClass('is-front');
148			hoverItem.addClass('is-hover');
149			overlay.stop(true,false).fadeIn(300);
150			hoverFirst = true;
151		});
152		menuBlock.mouseover(function(){
153			//itemからmenuのhoverが継続している場合はそのままmenuを表示する
154			menuBlock.eq(hoverIndex).stop(true,false).slideDown(300);
155			menuBlock.eq(hoverIndex).addClass('is-front');
156			hoverItem.addClass('is-hover');
157			overlay.stop(true,false).fadeIn(300);
158		});
159		headerItem.add(menuBlock).mouseleave(function(){
160			//hoverを外したらmenuを非表示
161			hoverItem.removeClass('is-hover');

162			menuBlock.stop(true,false).slideUp(300);
163			overlay.stop(true,false).fadeOut(300);
164			menuBlock.removeClass('is-front');
165		});
166
167		//overlay
168		overlay.on('click',function(){
169			menuSearch.stop(true,false).slideUp(300);
170			headerSearch.removeClass('is-hover');
171			hoverItem.removeClass('is-hover');
172			menuBlock.stop(true,false).slideUp(300);
173			overlay.stop(true,false).fadeOut(300);
174			menuBlock.removeClass('is-front');
175		});
176	}
177
178	//side ranking タブ切り替え
179	if($('.l-side__ranking')[0]){
180		let sideTab = $('.l-side__ranking-tab');
181		let sidePanel = $('.l-side__ranking-panel');
182		sideTab.on('click',function(){
183			sideTab.add(sidePanel).removeClass('is-active');
184			$(this).addClass('is-active');
185			let index = sideTab.index(this);
186			sidePanel.eq(index).addClass('is-active');
187			return false;
188		});
189	}
190
191	//link
192	$('a[href^="#"]').click(function(){
193		let headerHeight = 0;
194		if(window.matchMedia("(max-width: 767px)").matches){
195			headerHeight = $('.l-header__top').outerHeight();
196		}else{ 
197			headerHeight = $('.l-header').outerHeight();
198		}
199	  let speed = 400;
200	  let href= $(this).attr("href");
201	  let target = $(href == "#" || href == "" ? 'html' : href);
202	  let position = target.offset().top - headerHeight;
203	  $('body,html').animate({scrollTop:position}, speed, 'swing');
204	  return false;
205	});
206});