<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
h1{
position: fixed;
top: 20px;
left: 20px;
color: #fff;
}
.gnb{
display: flex;
position: fixed;
right: 20px;
top: 30px;
color: #fff;
}
.gnb li{
margin-left: 20px;
}
.gnb li.on{
background-color: #fff;
color: #666;
}
section{
height: 100vh;
line-height: 100vh;
font-size: 170px;
font-weight: bold;
font-family: fantasy;
text-align: center;
color: rgba(255,255,255,0.2);
}
.s1{background-color: dodgerblue;}
.s2{background-color: tomato;}
.s3{background-color: darkseagreen;}
.s4{background-color: mediumpurple;}
.s5{background-color: darksalmon;}
</style>
</head>
<body>
<h1>LOGO</h1>
<ul class="gnb">
<li class="on">SECTION#1</li>
<li>SECTION#2</li>
<li>SECTION#3</li>
<li>SECTION#4</li>
<li>SECTION#5</li>
</ul>
<section class="s1">SECTION1</section>
<section class="s2">SECTION2</section>
<section class="s3">SECTION3</section>
<section class="s4">SECTION4</section>
<section class="s5">SECTION5</section>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
// scroll 위치에 따라 각 섹션에 해당되는 li에 addClass("on") 하기
var i = 0;
var winHeight = $(window).height();
//window의 높이값을 구하기.
console.log(winHeight);
$(window).on("scroll", function() {
var scr = $(this).scrollTop();
//스크롤 바 수직 위치값
for (i = 0; i < $("section").length; i++) {
if (scr >= winHeight * i && scr < winHeight * (i+1)) {
$("ul li").eq(i).addClass("on").siblings().removeClass("on");
}
}
});
// li를 클릭했을 때 해당되는 섹션으로 스크롤 이동시키기
var scr = $(this).scrollTop();
console.log(scr);
$("ul li").on("click", function() {
var j = $(this).index();
console.log(j);
$("html, body").stop().animate({
"scrollTop" : winHeight * j
});
});
</script>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.