[jQuery] 스크롤시 class 추가/제거

JavaScript

기록기록

방법1

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
jQuery(document).ready(function() {
	var bodyOffset = jQuery('body').offset();
	jQuery(window).scroll(function() {
		if (jQuery(document).scrollTop() > bodyOffset.top) {
			jQuery('header').addClass('scroll');
		} else {
			jQuery('header').removeClass('scroll');
		}
	});
});
</script>

화면을 스크롤 하면 header 에 scroll 이라는 class 가 추가된다.

방법2

$(window).scroll(function() {
	var scroll = $(window).scrollTop();
	//console.log(scroll);
	if (scroll >= 50) {
		//console.log('a');
		$(".header").addClass("change");
	} else {
		//console.log('a');
		$(".header").removeClass("change");
	}
});

https://jsfiddle.net/19bwe33x/12/

JQueryoffsetscroll
블로그
프로젝트
스터디
포트폴리오