[jQuery] 스크롤 이벤트 / 스크롤 특정 위치에 따라 효과 변경

 

스크롤 위치에 따라 요소들에 Class를 추가해준다던지, 효과를 변경할 수 있다.

 

 

현재 스크롤 위치 구하기

$(document).scrollTop();

 

특정 요소의 위치 구하기

offset().top을 사용하면 문서 상단으로부터 특정 섹션, div가 있는 위치를 구할 수 있다.

$("#section3").offset().top;

 

scroll()기본 코드

 

$(window).scroll(function(){

  var h = $(document).scrollTop(); //현재 스크롤 위치
    
      if(h > 200) { // 스크롤 위치가 200을 넘으면

      } else {

      }

});

 

 

 

응용

 

현재 내 스크롤 위치와 특정요소의 위치를 통해 사이트에서 다양하게 구현이 가능하다.

 

 

1) 배경색이 검정색인 섹션(#section1)을 지날때는 상단메뉴에 class명 white를 추가해주어, 글자색을 흰색으로 변경해주고, 로고 이미지 경로 변경으로 이미지 컬러도 변경해준다.

if(h > offset && h < offset2) { //특정 div(#section1)가 있는 곳을 지날 때
       mn.addClass("white"); 
       logo.attr("src", "/img/symbol_white.svg");
}

 

2) 사이트에서 스크롤을 내릴때 스크롤이 200이상 내려가면 상단 메뉴에 Class명 fixed를  추가해주고, 로고도 변경해준다.

 if(h > 200) {  //스크롤이 200 이상에 위치할 때
        mn.addClass("fixed");    
        mn.removeClass("white"); 
        logo.attr("src", "/img/symbol.svg");
}

 

 

3) 그 외에는 추가한 모든 Class를 지워주고, 이미지 경로도 원래대로 돌려준다.

 

else {  // 그 외
        mn.removeClass("fixed");
        mn.removeClass("white"); 
        logo.attr("src", "/img/logo.svg");
}

 

 

전체코드

$(window).scroll(function(){

        var 
        mn = $("#header");
        logo = $("#header #logo img");
        h = $(document).scrollTop();
        offset = $("#section1").offset().top;
        offset2 = $("#section2").offset().top;
        
        
        if(h > offset && h < offset2) { //특정 div(#section1)가 있는 곳을 지날 때
           mn.addClass("white"); 
           logo.attr("src", "/img/symbol_white.svg");
        } else if(h > 200) {  //스크롤이 200 이상에 위치할 때
            mn.addClass("fixed");    
            mn.removeClass("white"); 
            logo.attr("src", "/img/symbol.svg");
        } else {  // 그 외
            mn.removeClass("fixed");
            mn.removeClass("white"); 
            logo.attr("src", "/img/logo.svg");
        }


    });

 

 

 

 

썸네일