<!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{
height: 123vh;
background-color: dodgerblue;
}
.s2{
height: 97vh;
background-color: tomato;
}
.s3{
height: 152vh;
background-color: darkseagreen;
}
.s4{
height: 260vh;
background-color: mediumpurple;
}
.s5{
height: 140vh;
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>
/*섹션의 높이값이 서로 다른 경우(+ 높이값을 예측하지 못할 경우)*/
var winHeight = $(window).height();
/*각 섹션의 시작지점과 문서 최상단과의 거리*/
var offsetArr = [];
// offsetArr.push($(".s1").offset().top)
// offsetArr.push($(".s2").offset().top)
// offsetArr.push($(".s3").offset().top)
// offsetArr.push($(".s4").offset().top)
// offsetArr.push($(".s5").offset().top)
for(i=0; i<$("section").length; i++){
offsetArr.push($("section").eq(i).offset().top);
}
$(window).on("scroll", function() {
var scr = $(this).scrollTop();
for(i=0; i<$("section").length; i++){
if(scr>=offsetArr[i]&&scr<offsetArr[i+1]){
$("ul li").eq(i).addClass("on").siblings().removeClass("on");
} else if(scr >= offsetArr[4]){
$("ul li").eq(4).addClass("on").siblings().removeClass("on");
}
}
})
</script>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.