https://mediaexcel.com/common/theme/layout/_layout.js

1// JavaScript Document
2$(document).ready(function() {
3    $('.animsition').animsition();
4});
5
6var lnb_type='type1'; 
7
8$(function () {
9    
10    // 스크롤시 header 고정
11    $(window).scroll(function(){
12        if($(window).scrollTop() > 1) {
13            $('#header').addClass('fixed');
14        } else {
15            $('#header').removeClass('fixed');
16        }
17    });
18	$(window).trigger('scroll'); 
19   
20	$("#header").addClass(lnb_type); 
21
22    // Hide Header on on scroll down
23	/*
24     var menupos = $('#header').offset().top;
25    $(window).scroll(function(){
26        if($(window).scrollTop() > 40) {
27            $('#header').removeClass('nav-top');
28        } else {
29            $('#header').addClass('nav-top');
30        }
31    });
32	*/
33	
34	/*
35    var didScroll;
36    var lastScrollTop = 0;
37    var delta = 5;
38    var navbarHeight = $('#header').outerHeight();
39    $(window).scroll(function(event){
40        didScroll = true;
41    });
42    setInterval(function() {
43        if (didScroll) {
44            hasScrolled();
45            didScroll = false;
46        }
47    }, 250);
48    function hasScrolled() {
49        var st = $(this).scrollTop();
50        
51        // Make sure they scroll more than delta
52        if(Math.abs(lastScrollTop - st) <= delta)
53            return;
54        
55        // If they scrolled down and are past the navbar, add class .nav-up.
56        // This is necessary so you never see what is "behind" the navbar.
57        if (st > lastScrollTop && st > navbarHeight){
58            // Scroll Down
59            //$('#header').removeClass('nav-down').addClass('nav-up');
60        } else {
61            // Scroll Up
62            if(st + $(window).height() < $(document).height()) {
63                //$('#header').removeClass('nav-up').addClass('nav-down');
64            }
65        }        
66        lastScrollTop = st;
67    }
68	*/
69
70
71
72    // header gnb 서브메뉴
73    $(document).on('mouseenter', '#header__lnb .lnb-menu > li', function() {
74        if ($(window).width() > 1025) {
75			if ($(this).hasClass('search')||$(this).hasClass('lang')) {
76				return; 
77			}
78			if(lnb_type=='type1') { 
79		        var gnbmenu = $(this).find('.lnb_sub_menu');
80			} else if (lnb_type=='type2') {
81				var gnbmenu = $(this).parent().find('.lnb_sub_menu'); 
82			}
83            gnbmenu.show();
84            $('.lnb_sub_menu').not(gnbmenu).hide();
85            $(this).addClass('ov');
86			$('#header').addClass('open_menu');
87            $('.lnb_sub_menu').addClass('open');
88        } else {
89            return true;
90        }
91    });
92    $('#header__lnb .lnb-menu > li').on('mouseleave', function(){ 
93		if(lnb_type=='type1') {
94			$('.lnb_sub_menu').stop().finish().hide();
95			$(this).removeClass('ov');
96			$('#header').removeClass('open_menu');
97			$('.lnb_sub_menu').removeClass('open');
98		} else if(lnb_type=='type2') {
99			$(this).removeClass('ov');
100		}
101    });
102	$(document).on('mouseleave', '#header', function() {
103		if(lnb_type=='type2') { 
104		    $('.lnb_sub_menu').stop().finish().slideUp(200);
105			$('#header').removeClass('open_menu');
106			$('.lnb_sub_menu').removeClass('open');
107		} 
108	}); 
109    $(document).on('click', '#header__lnb .lnb-menu > li', function() {
110        if ($(window).width() < 1025) {
111            var gnbmenu = $(this).find('.lnb_sub_menu');
112            if(gnbmenu.css('display') == 'none') {
113                gnbmenu.slideDown();
114                $("#header__lnb .lnb-menu > li").removeClass('ov');
115                $(this).addClass('ov');
116                $('.lnb_sub_menu').not(gnbmenu).slideUp();
117                return false;
118            }
119            else {
120                gnbmenu.slideUp();
121            }
122        } else {
123            return true;
124        }
125    });
126
127    $(document).on('mouseenter', '#header__lnb .lnb-menu .lnb_sub_menu', function() {
128       if ($(window).width() > 1025) {
129			$(this).parent().addClass('active'); 
130        } else {
131            return true;
132        }
133    });
134    $(document).on('mouseleave', '#header__lnb .lnb-menu .lnb_sub_menu', function() {
135       if ($(window).width() > 1025) {
136			$(this).parent().removeClass('active'); 
137			//$('.lnb_sub_menu').hide(); 
138        } else {
139            return true;
140        }
141    });
142
143
144    // mobile
145	/*
146    $(document).on('click', '#header__mobile', function() {
147        if ($(window).width() < 1025) {
148            mobileMenu();
149        } else {
150            return true;
151        }
152    });
153    function mobileMenu() {
154		$('.header-inner  #header__lnb').fadeToggle();
155		$('.header-inner  #header__lnb').toggleClass('active');
156		$('.header__gnb').toggleClass('none');
157		$('#header__mobile').toggleClass('active');
158		$('body').toggleClass('hidden');
159    }
160	*/
161
162    // mobile
163    $(document).on('click', '#header__mobile', function() {
164		/*
165        if ($(window).width() < 1025) {
166            mobileMenu();
167        } else {
168            return true;
169        }
170		*/
171
172		mobileMenu();
173    });
174
175
176
177    function mobileMenu() {
178		/*
179		$('.header-inner  #header__lnb').fadeToggle();
180		$('.header-inner  #header__lnb').toggleClass('active');
181		$('.header__gnb').toggleClass('none');
182		$('#header__mobile').toggleClass('active');
183		$('body').toggleClass('hidden');
184		*/
185
186		var $motion_item  = $( '.gl_menu_logo,  .gl_menu_etc, .gl_menu_close' );
187
188		var has = $('#header__mobile').hasClass('active');
189		if(has) {
190			Muee.SS.init(); 
191			//console.log(typeof(mfullpage)); 
192
193			if(typeof(mfullpage)!='undefined') { 
194				mfullpage.reBuild();
195				mfullpage.setAllowScrolling(true); 
196			} 
197		} else { 
198			Muee.SS.destroy();	
199			//console.log(typeof(mfullpage)); 
200
201			if(typeof(mfullpage)!='undefined') { 
202				mfullpage.setAllowScrolling(false); 
203			}
204		}
205
206
207        $('.header__gnb').toggleClass('none');
208        $('#header__mobile').toggleClass('active');
209		
210
211        $('body').toggleClass('hidden');
212		// $('.gl_menu_box').show().done(function(){}); 
213		$('.gl_menu_box').show(0,function(){

214			let $this = $(this); 
215
216			$('.gl_menu_box').toggleClass('active'); 
217			let status = $('.gl_menu_box').hasClass('active'); 
218
219			let tl = gsap.timeline({delay:0.3}); 
220			let gl_menu_box = $('.gl_menu_inner');
221
222			if(gl_menu_box.length==0) return; 
223
224			if(status) { 
225				
226				$motion_item.each(function(){
227					var $this = $(this);
228					//TweenMax.set($menu_container, {autoAlpha: 1})
229					gsap.fromTo($this, 1, {autoAlpha: 0, y: '50px',ease: Power3.easeOut}, {
230						autoAlpha: 1, y: '0',
231						onStart: function() {
232						}
233					});
234				});
235
236				gl_menu_box.find(".gl_menu_box_list").each(function(e,t) {
237					tl.fromTo(t, .6, {opacity:0,y:50}, {y:0, duration: 1, opacity:1,delay:.3,ease:Power2.easeOut },.07*e );
238				}); 
239			} else { 
240				tl = gsap.timeline({delay:0}); 
241				let m = $motion_item; 
242				tl.fromTo(m, .6, {opacity:1}, {duration:0.3, opacity:0, ease:Power2.easeOut, onComplete :function(){  } } );
243
244				tl = gsap.timeline({delay:0}); 
245				let t = gl_menu_box.find(".gl_menu_box_list");
246				tl.fromTo(t, .6, {opacity:1}, {duration:0.5, opacity:0, ease:Power2.easeOut, onComplete :function(){ $this.hide(); } } );
247			}
248
249		});
250    }
251	$(document).on('click', '.gl_menu_close', function() {
252		mobileMenu(); 
253	}); 
254
255    $(document).on('mouseenter', '.gl_menu_title', function() {
256        if ($(window).width() > 800) {
257			if ($(this).hasClass('search')||$(this).hasClass('lang')) {
258				return; 
259			}
260			/*
261			var gnbmenu = $(this).parent().find('.gl_menu_sublist'); 
262            gnbmenu.slideDown();
263            $('.gl_menu_sublist').not(gnbmenu).hide();
264			*/
265			$('.gl_menu_title').removeClass('on'); 
266
267            $(this).addClass('on');
268			$('#header').addClass('open_menu');
269            $('.gl_menu_sublist').addClass('open');
270        } else {
271            return true;
272        }
273    });
274    $('.gl_menu_title').on('mouseleave', function(){ 
275		//if(lnb_type=='type1') {
276		if ($(window).width() > 800) {
277			var has = $(this).hasClass('on'); 
278			if(!has) { 
279				// $('.gl_menu_sublist').stop().finish().hide();
280				$(this).removeClass('on');
281			} 
282		} 
283			//$(this).removeClass('ov');
284			//$('#header').removeClass('open_menu');
285			//$('.gl_menu_sublist').removeClass('open');
286		//} else if(lnb_type=='type2') {
287			
288		//}
289    });
290	$('.gl_menu_box_inner').on('mouseleave', function(){ 
291		if ($(window).width() > 800) {
292			$('.gl_menu_title').removeClass('on'); 
293			//$('.gl_menu_sublist').hide();
294		} 
295	}); 
296
297	$('.gl_menu_sublist').on('mouseover', function(){
298		var parents = $(this).parent().find('.gl_menu_title'); 
299		parents.addClass('on'); 
300	});
301	$('.gl_menu_sublist').on('mouseout', function(){
302		var parents = $(this).parent().find('.gl_menu_title'); 
303		parents.removeClass('on'); 
304		//$(this).slideUp();
305	});
306
307
308
309    $(window).resize(function(){
310        var wWidth = $(window).width();
311        if(wWidth >= 1025)
312        {
313            $("#header .header-inner  #header__lnb").fadeIn();
314            $('.lnb_sub_menu').slideUp();
315        }
316    });
317
318
319
320    $(document).on('click', '.lnb-search .search_btn', function() {
321        $('.header__search_popup').fadeIn();
322		$('body').toggleClass('hidden');
323    });
324    $(document).on('click', '.header__search_popup .popup__close', function() {
325        $('.header__search_popup').fadeOut();
326		$('body').toggleClass('hidden');
327    });
328
329
330	/*
331    $('.btnTop').on('click', function(){
332        var Dnum = $(this).index();
333        var Dheight = $('html,body').eq(Dnum).offset();
334        $('html,body').animate({scrollTop : Dheight.top},500);
335    });
336    var btnTopMain = $('.btnTop');
337    var btnTop = $('.btnTop');
338    $(window).scroll(function () {
339        var scrollHeight = $(window).scrollTop();
340        var windowHeight =  $(window).height();
341        var documentHeight = $(document).height();
342
343        if ((scrollHeight + windowHeight) >= documentHeight - 249) {
344            btnTopMain.addClass('btnTop-bot');
345        } else if ((scrollHeight + windowHeight) >= documentHeight - 194) {
346            btnTop.addClass('btnTop-bot');
347        } else{
348            btnTopMain.removeClass('btnTop-bot');
349            btnTop.removeClass('btnTop-bot');
350        }
351    });
352    var btnTopHover = $('.btnTop').offset().top;
353    $(window).scroll(function(){
354        if($(window).scrollTop() > 500) {
355            $('.btnTop').fadeIn('slow');
356        } else {
357            $('.btnTop').fadeOut("slow");
358        }
359    });
360	*/
361
362
363    $(document).ready(function (){
364		$('.sub-menu ul').each(function (){
365			var _width = $(this).width(),
366			_length = $(this).length,
367			_index = $(this).find('.on').index();
368			_location = (_width/_length) * _index;
369
370			if (_location > 2040) {
371				$('.sub-menu').scrollLeft(_location);
372			}
373		});
374	});
375
376
377	subTop();	// top버튼애니메이션 
378});
379
380
381var $footer = $("#footer"); 
382
383var subTop = function() {
384	subTopProgress(); 
385	subTopProgressAni(0,0); 
386
387	$(window).on('scroll', subTopProgress);
388
389	$('.btnTop').on('click', function () {
390		$('html,body').stop().animate({
391			scrollTop: 0
392		}, 600);
393	}); 
394}; 
395
396var subTopProgress = function() {
397	var windowScrollTop = $(window).scrollTop();
398	var docHeight = $(document).height();
399	var windowHeight = $(window).height();
400	var progress = (windowScrollTop / (docHeight - windowHeight - $footer.height())) * 100;
401
402	if ($(window).scrollTop() > $(window).height() * 0.005) {
403		subTopProgressAni(Math.round(progress) / 100, 1);
404	} else {
405		subTopProgressAni(Math.round(progress) / 100, 0);
406	}
407
408	if($(window).scrollTop() > 100) {
409		$('.btnTop').fadeIn('slow').addClass('active');
410	} else {
411		$('.btnTop').fadeOut("slow").removeClass('active');
412	}
413
414	if ($(document).height() - $(window).height() - $footer.outerHeight() < 0) {
415		$('.btnTop').hide();
416		return;
417	}
418}; 
419
420var subTopProgressAni = function(_val, _opacity) {
421	var obj = $('.btnTop .back'); 
422	var val = _val * 100; 
423	obj.css({'bottom': '-'+(100 - val) + '%'});
424
425	if(val>55) {
426		$('.btnTop .material-icons').addClass('active'); ; 
427	} else {
428		$('.btnTop .material-icons').removeClass('active'); ; 
429	}
430};