# 9.활성화메뉴

코알라코딩

●

# 목차

1. 메뉴활성화
- 1.1. 단계1-상단메뉴
  - 1.1.1. 스티키

# 1. 메뉴활성화

# 1.1. 단계1-상단메뉴

# 1.1.1. 스티키

미리보기

https://qwerewqwerew.github.io/source/jq/9

html
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<meta property="og:title" content="발전하는 신입 퍼블리셔 망고의 포트폴리오입니다" />
		<meta property="og:url" content="http://www.mango.dothome.co.kr" />
		<meta property="og:type" content="website" />
		<!-- <meta property="og:image" content="...">  -->
		<meta property="og:site_name" content="망고의 포트폴리오" />
		<meta property="og:description" content="오늘보다는 내일 더 성장하는 것이 목표인 퍼블리셔의 포트폴리오입니다." />
		<meta name="twitter:card" content="summary" />
		<meta name="twitter:title" content="발전하는 신입 퍼블리셔 망고의 포트폴리오입니다" />
		<meta name="twitter:description" content="오늘보다는 내일 더 성장하는 것이 목표인 퍼블리셔의 포트폴리오입니다." />
		<!-- <meta name="twitter:image" content="..." /> -->
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/style.css" />
	</head>

	<body>
		<nav>
			<ul class="gnb">
				<li class="on"><a href="#section1">section1</a></li>
				<li><a href="#section2">section2</a></li>
				<li><a href="#section3">section3</a></li>
				<li><a href="#section4">section4</a></li>
				<li><a href="#section5">section5</a></li>
				<li><a href="#section6">section6</a></li>
				<li><a href="#section7">section7</a></li>
				<li><a href="#section8">section8</a></li>
				<li><a href="#section9">section9</a></li>
			</ul>
		</nav>
		<ul class="sideNav">
			<li class="on"><a href="#section1">section1</a></li>
			<li><a href="#section2">section2</a></li>
			<li><a href="#section3">section3</a></li>
			<li><a href="#section4">section4</a></li>
			<li><a href="#section5">section5</a></li>
			<li><a href="#section6">section6</a></li>
			<li><a href="#section7">section7</a></li>
			<li><a href="#section8">section8</a></li>
			<li><a href="#section9">section9</a></li>
		</ul>
		<main class="container">
			<section class="section" id="section1">section1</section>
			<section class="section" id="section2">section2</section>
			<section class="section" id="section3">
				<div class="ball">ball</div>
				section3
			</section>
			<section class="section" id="section4">section4</section>
			<section class="section" id="section5">section5</section>
			<section class="section" id="section6">section6</section>
			<section class="section" id="section7">section7</section>
			<section class="section" id="section8">section8</section>
			<section class="section" id="section9">section9</section>
		</main>
		<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
		<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
		<script src="./jq.js"></script>
	</body>
</html>

reset다운로드

https://meyerweb.com/eric/tools/css/reset/

style.css
@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css2?family=Black+And+White+Picture&family=Noto+Sans+KR:wght@100; 300; 400; 500; 700; 900&display=swap');
html {
	overflow-x: hidden;
}
html,
body,
a,
table {
	font-family: 'Black And White Picture', sans-serif;
	font-family: 'Noto Sans KR', sans-serif;
}
ul,
li,
ol {
	list-style: none;
}
a {
	text-decoration: none;
}

body::-webkit-scrollbar {
	width: 1em;
	background-color: red;
	background-image: repeating-conic-gradient(#474bff 0% 25%, #47d3ff 0% 50%);
	background-position: 0 0, 38px 38px;
	background-size: 46px 76px;
	background-color: #47d3ff;
}
body::-webkit-scrollbar-thumb {
}
body::-webkit-scrollbar-button {
	width: 3em;
	height: 3em;
	background-color: #282972;
	box-shadow: 1px 1px 3px #000;
}
body::-webkit-scrollbar-thumb {
	width: 10em;
	height: 10em;
	background-color: #47d3ff;
	background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
	border-radius: 3px 0 0 3px;
	box-shadow: 1px 1px 4px #000;
}
/* nav */
nav {
	position: absolute;
	top: 0;
	z-index: 2;
	background: rgba(0, 0, 0, 0.4);
	padding: 1em 1.4em;
	width: 100%;
}
nav.sticky {
	background: rgba(255, 0, 100, 0.6);
	position: fixed;
	z-index: 222;
}
nav .gnb {
	display: flex;
	width: 100%;
	max-width: 1600px;
	margin: auto;
}
nav .gnb li {
	flex: 1 1 200px;
}
nav .gnb li a {
	color: #fff;
	display: inline-block;
	padding: 0.2rem;
	text-align: center;
	line-height: 2rem;
	height: 2rem;
	position: relative;
}
nav .gnb li a:before,
nav .gnb li a:after {
	position: absolute;
	content: '';
	left: 0;
	width: 100%;
	height: 2px;
	background: #000;
	transform: scaleX(0);
	transition: all 0.5s;
}
nav .gnb li a:before {
	top: 0;
	transform-origin: left;
}
.gnb li a:after {
	bottom: 0;
	transform-origin: right;
}
nav .gnb li.on a:before,
nav .gnb li a:hover:before,
nav .gnb li.on a:after,
nav .gnb li a:hover:after {
	transform: scaleX(1);
}
.container {
}
section {
	min-height: 100vh;
	line-height: 100vh;
	text-align: center;
	background-color: yellow;
	margin: 40vw auto;
}
section::selection {
	color: red;
	background-color: #00eeff;
}

/* sideNav  */
.sideNav {
	position: fixed;
	top: 10%;
	right: 10%;
	z-index: 999;
}
.sideNav a {
	display: inline-block;
	padding: 1em;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	margin-bottom: 1em;
}
.sideNav li.on a::before {
	content: '😺';
}

/* sectionIn */
section {
	position: relative;
}
section .ball {
	position: absolute;
	background-color: skyblue;
	width: 450px;
	height: 450px;
	border-radius: 50%;
	left: -450px;
	transition: left 1s;
}
section.on .ball {
	left: 100px;
}

javascript
let win = $(window),
	sections = $('.section'),
	gnb = $('.gnb li'),
	sideNav = $('.sideNav>li');

const gnbOff = () => {
	gnb.each(() => {
		this.removeClass('on');
	});
};

gnb.click(function (e) {
	e.preventDefault();
	let tg = $(this);
	let index = tg.index();
	let section = sections.eq(index);
	let offset = section.offset().top;
	$('html,body').stop().animate({ scrollTop: offset }, 1000, 'easeOutCirc');
});
sideNav.click(function (e) {
	e.preventDefault();
	let tg = $(this);
	let index = tg.index();
	let section = sections.eq(index);
	let offset = section.offset().top;
	$('html,body').stop().animate({ scrollTop: offset }, 1000, 'easeOutCirc');
});

win.scroll(function () {
	let sct = win.scrollTop();
	sections.each(function (i) {
		if (sct >= sections.eq(i).offset().top - 300) {
			$('.gnb li').eq(i).addClass('on').siblings().removeClass('on');
			sideNav.eq(i).addClass('on').siblings().removeClass('on');
			sections.eq(i).addClass('on').siblings().removeClass('on');
		}
	});
	sct > 400 ? $('nav').addClass('sticky') : $('nav').removeClass('sticky');
});

let win = window,
	winSct,
	sections = document.querySelectorAll('.section'),
	gnb = document.querySelectorAll('.gnb li'),
	sideNav = document.querySelectorAll('.sideNav>li');

const gnbOff = () => {
	gnb.forEach((o) => {
		o.classList.remove('on');
	});
};
const navOff = () => {
	sideNav.forEach((o) => {
		o.classList.remove('on');
	});
};

gnb.forEach((el) => {
	el.addEventListener('click', function (e) {
		e.preventDefault();
		document.querySelector(el.firstChild.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
		gnbOff();
		el.classList.add('on');
	});
});
sideNav.forEach((el) => {
	el.addEventListener('click', function (e) {
		e.preventDefault();
		document.querySelector(el.firstChild.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
		navOff();
		el.classList.add('on');
	});
});

win.addEventListener('scroll', function (e) {
	e.preventDefault();
	winSct = this.scrollY;
	winSct >= 400 ? document.querySelector('nav').classList.add('sticky') : document.querySelector('nav').classList.remove('sticky');
	scrollOn(winSct);
});

const scrollOn = (sct) => {
	if (sct >= sections[0].offsetTop - 300) {
		gnbOff();
		navOff();
		document.querySelector('.gnb li:nth-child(1)').classList.add('on');
		document.querySelector('.sideNav li:nth-child(1)').classList.add('on');
		sections[0].classList.add('on');
	}
	if (sct >= sections[1].offsetTop - 300) {
		gnbOff();
		navOff();
		document.querySelector('.gnb li:nth-child(2)').classList.add('on');
		document.querySelector('.sideNav li:nth-child(2)').classList.add('on');
		sections[1].classList.add('on');
	}
	if (sct >= sections[2].offsetTop - 700) {
		gnbOff();
		navOff();
		document.querySelector('.gnb li:nth-child(3)').classList.add('on');
		document.querySelector('.sideNav li:nth-child(3)').classList.add('on');
		sections[2].classList.add('on');
	}
	if (sct >= sections[3].offsetTop - 300) {
		gnbOff();
		navOff();
		document.querySelector('.gnb li:nth-child(4)').classList.add('on');
		document.querySelector('.sideNav li:nth-child(4)').classList.add('on');
	}
	if (sct >= sections[4].offsetTop - 300) {
		gnbOff();
		navOff();
		document.querySelector('.gnb li:nth-child(5)').classList.add('on');
		document.querySelector('.sideNav li:nth-child(5)').classList.add('on');
	}
	if (sct >= sections[5].offsetTop - 300) {
		gnbOff();
		navOff();
		document.querySelector('.gnb li:nth-child(6)').classList.add('on');
		document.querySelector('.sideNav li:nth-child(6)').classList.add('on');
	}
	if (sct >= sections[6].offsetTop - 300) {
		gnbOff();
		navOff();
		document.querySelector('.gnb li:nth-child(7)').classList.add('on');
		document.querySelector('.sideNav li:nth-child(7)').classList.add('on');
	}
	if (sct >= sections[7].offsetTop - 300) {
		gnbOff();
		navOff();
		document.querySelector('.gnb li:nth-child(8)').classList.add('on');
		document.querySelector('.sideNav li:nth-child(8)').classList.add('on');
	}
	if (sct >= sections[8].offsetTop - 300) {
		gnbOff();
		navOff();
		document.querySelector('.gnb li:nth-child(9)').classList.add('on');
		document.querySelector('.sideNav li:nth-child(2)').classList.add('on');
	}
};

jquery javascript jquery + javascript