1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
| $(document).ready(function () {
initTabSwipers(); // 클릭하면 탭 가운데 정렬 함수
menuScroll(); // 메뉴 클릭 시 스크롤 이동 함수
});
function menuScroll() {
const $menuWrap = $('.menu_wrap');
const $menuBox = $menuWrap.find('.tab_swiper');
const $menu = $('.menu');
const $menuList = $menu.find('li');
const $menuItems = $menu.find('a')
const $contents = $('.content');
const offsetMo = 0; // 메뉴 상단 고정 위치 (모바일)
const offsetPC = 0; // 메뉴 상단 고정 위치 (PC)
const topMo = 45; // 스크롤 했을 때 컨텐츠 시작 위치 (모바일)
const topPc = 65; // 스크롤 했을 때 컨텐츠 시작 위치 (PC)
const breakpoints = 1181; // 모바일 사이즈 분기점
let windowWidth = window.innerWidth;
let isMobile = window.innerWidth < breakpoints;
let position = $menuWrap.offset().top;
let resizeTimer;
let scrollTimer;
// 메뉴를 고정하는 함수
function scrollAct() {
const scrollTop = $(window).scrollTop();
const offset = isMobile ? offsetMo : offsetPC;
if (scrollTop > position - offset) {
$menuWrap.css({ 'position': 'fixed', 'top': offset + 'px' });
} else {
$menuWrap.css({ 'position': 'absolute', 'top': '0' });
}
}
// 활성화된 메뉴 항목을 중앙으로 이동하는 함수
function activeMenu(target) {
const targetPos = target.position();
let pos;
let listWidth = 0;
$menu.find('.swiper-slide').each(function () {
listWidth += $(this).outerWidth();
});
const selectTargetPos = targetPos.left + target.outerWidth() / 2;
if ($menu.outerWidth() < listWidth) {
const boxHarf = $menuBox.width() / 2;
if (selectTargetPos <= boxHarf) { // 왼쪽에 위치
pos = 0;
} else if ((listWidth - selectTargetPos) <= boxHarf) { // 오른쪽에 위치
pos = listWidth - $menuBox.width();
} else {
pos = selectTargetPos - boxHarf;
}
}
$menu.css({
"transform": "translate3d(" + (pos * -1) + "px, 0, 0)",
"transition-duration": "300ms"
});
}
// 창 크기 변경 이벤트 핸들러
function handleResize() {
if (windowWidth == window.innerWidth) return;
$(window).off('scroll', scrollAct);
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
isMobile = window.innerWidth < breakpoints;
$menuWrap.css({ 'position': 'absolute', 'top': '0' });
position = $menuWrap.offset().top;
$(window).on('scroll', scrollAct);
}, 100);
windowWidth = window.innerWidth;
}
// 스크롤 할 때 메뉴의 활성 상태를 설정하는 함수
function handleScroll() {
if (!$('html, body').is(":animated")) {
if ($(window).scrollTop() + window.innerHeight < $(document).height()) {
const scltop = $(window).scrollTop() + (isMobile ? topMo : topPc);
$.each($contents, function (idx, item) {
const targetTop = $(this).offset().top;
if (targetTop <= scltop) {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function () {
$menuList.removeClass('active');
$menuList.eq(idx).addClass('active');
activeMenu($menuList.eq(idx));
}, 50);
}
});
}else{ // 맨 아래에 도달하면 마지막 메뉴 항목 활성화
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function () {
const lastInx = $menuList.length - 1
$menuList.removeClass('active');
$menuList.eq(lastInx).addClass('active');
activeMenu($menuList.eq(lastInx));
}, 50);
}
}
}
// 페이지 로드 시 초기화 작업
$(window).on('load', function () {
$(window).on('scroll', scrollAct).scroll();
});
// 창 크기 변경 이벤트 및 스크롤 이벤트 핸들러 등록
$(window).on('resize', handleResize);
$(window).scroll(handleScroll);
// 메뉴 클릭 이벤트 핸들러 등록
$menuItems.on('click', function (e) {
e.preventDefault();
const gnbHash = $(this).attr('href');
const offset = $(gnbHash).offset().top - (isMobile ? topMo - 1 : topPc - 1);
$('html, body').animate({ scrollTop: offset }, 500);
$(this).closest('li').addClass('active').siblings().removeClass('active');
});
}
|
