<!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: 152vh;
background-color: dodgerblue;
}
.s2{
height: 140vh;
background-color: tomato;
}
.s3{
height: 120vh;
background-color: darkseagreen;
}
.s4{
height: 110vh;
background-color: mediumpurple;
}
.s5{
height: 90vh;
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 src="js/jquery-ui.min.js"></script>
<script>
// section의 높이값이 서로 다른 경우, 높이값을 예측하지 못할 경우
var i = 0;
var winHeight = $(window).height();
// window의 높이값을 구하기.
console.log(winHeight);
// 각 섹션의 시작 시점과 문서 최상단과의 거리, offset().top
var offsetArr = [];
//console.log(offsetArr);
// offsetArr.push($(".s1").offset().top); // 자바스크립트 push()메서드
// offsetArr.push($(".s2").offset().top);
// offsetArr.push($(".s3").offset().top);
// offsetArr.push($(".s4").offset().top);
// offsetArr.push($(".s5").offset().top);
//console.log(offsetArr);
for(i =0 ; i < $("section").length; i++) {
offsetArr.push($("section").eq(i).offset().top);
}
console.log(offsetArr);
$(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");
}
}
});
// 왜 for문 안에서의 연산이 오류가 나서 마지막 페이지가 이상함?
// 풀이랑 다른게 없는데
</script>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.