본문 바로가기

js

[js]스크롤 이동 메뉴 이펙트

$(function(){
  var menu = $(".gnb li");
  var section = $("main section");
      
  menu.click(function(){
    var i=$(this).index();
    // console.log(i);
    var tg=section.eq(i);
    var tt=tg.offset().top;
    $("html, body").animate({
        scrollTop: tt - 90
    },500);
    // alert(tt);
    return false; 

  });

  $(window).scroll(function(){
    var st=$(window).scrollTop(); //스크롤 위치
    var bt=$(document).height()-$(window).height();

    if(st>=50){
    	$("#header").addClass("on")
   
    }else{  
    	$("#header").removeClass("on")
    };    
  
    section.each(function(){
      var i=$(this).index();
      var tt=$(this).offset().top;
      if(st >= tt -100){
          menu.removeClass("on"); //스크롤했을때 메뉴 색 변경
          menu.eq(i).addClass("on");
      };
      if(st==bt){
          menu.removeClass("on");
          menu.eq(i).addClass("on");
      };
    });    
  });    
});

top