scroll 절차 지향

**html 마크업

<section id="box1"></section>
<section id="box2"></section>
<section id="box3"></section>
<section id="box4"></section>

<ul id="navi">
<li><a href="#box1" class="on"></a></li>
<li><a href="#box2"></a></li>
<li><a href="#box3"></a></li>
<li><a href="#box4"></a></li>
</ul>

js 절차지향

var pos0 =("#box1").offset().top; 위에서부터의 거리(위치) var pos1 =("#box2").offset().top;
var pos2 =("#box3").offset().top; var pos3 =("#box4").offset().top;
$(window).on("scroll", function(){

var scroll = $(window).scrollTop();
//스크롤 위치는 위에서 얼마나 떨어져있는가 (거리)
$("#navi li a").removeClass("on");

//여기서 100vh 200vh로 해버리면 인식이 안됨 그래서 변수선언
if(scroll >= pos0 && scroll< pos1){
$("#navi li").eq(0).children("a").addClass("on")
}

if(scroll >= pos1 && scroll< pos2){

$("#navi li").eq(1).children("a").addClass("on")
}

  if(scroll >= pos2 && scroll< pos3){

$("#navi li").eq(2).children("a").addClass("on")
}

  if(scroll >= pos3 && scroll< pos4){

$("#navi li").eq(3).children("a").addClass("on")
}
});

$(#navi li a").on("click", function(e){
e.preventDefault();

var target = $(this).attr("href")
var targetPos = $(target).offset().top;
//각페이지의 위치
$("html,body").animate({
scrollTop : targetPos
},500);

});