<!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><img src="images/logo.png"/></h1>
<ul class="gnb">
<li class="on">Full Blossom</li>
<li>Be Colorful</li>
<li>Time on Board</li>
<li>Shiny Addict</li>
</ul>
<section class="s1">FULL BLOSSOM</section>
<section class="s2">Be Colorful</section>
<section class="s3">Time on Board</section>
<section class="s4">SECTION4</section>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.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");
}
}
$("ul li").animate({
}, 500, "easingOutBounce", function() {
})
});
// 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.