새소식

코딩코드/바로쓰는코딩

스크롤시 클래스 추가 시키기

  • -

스크롤을 내리면 클래스를 추가시킵니다.

스크롤이 발생하면 기존의 클래스에 옵션을 추가해둔 클래스를 추가하여 스크롤 후 이미지나 텍스트가 움직이거나 페이드 되거나 할 수 있는 코드입니다!

 <script>
 // 스크롤이 발생합니다.
    $(window).scroll(function(){ 
		var scroll = $(document).scrollTop(); 

		//스크롤이 200px 이상이면 #original클래스에 .addsign 클래스 추가합니다.
		if(scroll &gt;= 200 ){ 
		   $("#original").addClass("addsign");
		}
		//스크롤이 200px 미만이면 #original클래스에 .addsign 클래스를 삭제합니다.
		else  if(scroll &lt;= 200 ){ 
			$("#original").removeClass("addsign");
		}
    });
</script>

마우스가 다시 올라가면 클래스를 삭제하여 다시 스크롤시 또 적용되게 됩니다! 그게 싫다면 removeClass 부분을 삭제 하면 한번 스크롤 후 액션이 실행후 고정되겠죠? .addClass와 .removeClass 클래스 추가와 클래스 삭제가 포인트! 그리고 클래스가 아닌 스타일 추가를 원한다면

 <script>
 	$("#original").css("color","red");
</script>

위와 같은 식으로 color 그리고 속성을 적어주시면 됩니다!

Contents

포스팅 주소 복사 완료😎

PC버전 공감은 상단에 있어요!😍