[jQuery] 스크롤(scroll) 위치 감지 이벤트

제이쿼리(jQuery)를 이용하여 스크롤(scroll) 감지 이벤트 만들기

 

스크롤 시 배경색 변경 예시

 

[html]

<div class="menu">main menu</div>

  <div class="container"></div>

 

[css]

.menu{

  position: fixed;

  top: 0;

  width: 100%; height: 40px;

  background: pink;

}

.menu.active{

  background: blue;

  color: #fff;

}

.container{

  width: 100%; height: 800px;

}

 

[js]

$(document).on('scroll', function(){

    if($(window).scrollTop() > 100){

        $('.menu').addClass('active');

    }else{

        $('.menu').removeClass('active');

    }

  });

 

 

See the Pen [jQuery] scroll _ 스크롤 감지 이벤트 by Jinsik Son (@Jinsik-Son) on CodePen.