목차
- scroll() 예제 - 스크롤 이벤트 발생 횟수
- scroll() 정의
- scroll() 구문
- scroll() 예제 - 스크롤 높이 감지해 (클래스・스타일) 추가/삭제
- scroll() 예제 - 스크롤 높이 감지해 서서히 노출/제거
scroll() 예제 - 스크롤 이벤트 발생 횟수
<style>
div {
border:1px solid black;
width:200px;
height:100px;
overflow:scroll;
}
p {
height:300px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
x = 0;
$(document).ready(function(){
$("div").scroll(function(){
$("span").text( x+= 1);
});
});
</script>
<div>
<p>홈짱닷컴 (Homzzang.com)</p>
</div>
<p>스크롤 횟수 : <span>0</span> 번</p>
결과 보기
scroll() 정의
scroll 이벤트는 지정 요소에서 스크롤할 때 발생. (아래 2가지 역할)
- scroll 이벤트 촉발.
- scroll 이벤트 발생 시 실행할 함수 부착.
※ scroll 이벤트는 스크롤 가능한 요소와 window 객체에서 발생 가능.
scroll() 구문
scroll 이벤트 촉발.
$(selector).scroll()
scroll 이벤트에 함수 부착
$(selector).scroll(function)
[매개변수]
function
선택. scroll 이벤트 발생 시 실행할 함수 지정.
scroll() 예제 - 스크롤 높이 감지해 (클래스・스타일) 추가/삭제
[예제1]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$("p").addClass("hz");
} else {
$("p").removeClass("hz");
}
});
});
</script>
<style>
.hz {background-color: yellow;}
</style>
<body style="height:1550px;">
<p>홈짱닷컴 Homzzang.com</p>
<p style="position:fixed;">그누보드/영카트 강의.</p>
</body>
결과보기
[예제2]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 300) {
$("P").css("background" , "yellow");
} else {
$("P").css("background" , "");
}
});
})
</script>
<style>
.hz {background-color: yellow;}
</style>
<body style="height:1550px;">
<p>홈짱닷컴 Homzzang.com</p>
<p style="position:fixed;">그누보드/영카트 강의.</p>
</body>
결과보기
scroll() 예제 - 스크롤 높이 감지해 서서히 노출/제거
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(window).scroll(function(){
if ($(this).scrollTop() > 250) {
$('P').fadeIn();
} else {
$('p').fadeOut();
}
});
</script>
<style>
p {display:none; position:fixed;}
</style>
<body style="height:1550px;">
<p>홈짱닷컴 Homzzang.com<br>그누보드5/영카트5 강의.</p>
</body>
결과보기
