scroll() 이벤트 메서드
대상 요소의 스크롤바가 이동할 때마다 이벤트를 발송 시키거나
강제로 scroll이벤트를 발생시키는데 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<script>
/*
*/
$(function() {
$('.contentSecond').css({ marginTop: 100, opacity: 0});
/*
*/
$(window).on('scroll', function() {
// $(window).scrollTop() : 스크롤 바가 이동한 값
// $('#content').position().top : 포지션 기준이 되는 요소를 기준으로 선택한 요소에서 위치
console.log($(window).scrollTop());
console.log($('#content').position().top);
console.log('------------')
if ($(window).scrollTop() >= $('#content').position().top - 400) {
// 윈도 전체 창에서 scrollTop-맨위가 content의 포지션의 top-400 위치보다 크거나 같을때 애니메이션 발생.
$('.contentSecond').stop().animate({marginTop: 100, opacity:1 })
}
else {
$('.contentSecond').css({marginTop: 100, opacity: 0 })
}
});
});
</script>
<style>
* { margin: 0;
padding: 0;}
article {
max-width: 100%;
width: 100vw;
height: 2000px;
}
section article:nth-child(1) {
background-color: aqua;
}
section article:nth-child(2) {
background-color: rebeccapurple;
}
#content { height: 100%; }
.contentFirst { font-size: 18px; }
.contentSecond { margin-top: 100px; padding: 20px 0; background: #737d00; text-align: center; }
.contentSecond span { color: #737d00; font-weight: bold; }
</style>
</style>
</head>
<body>
<section>
<article></article>
<article>
<div id="content">
<p class="contentFirst">글이 들어갑니다. </p>
<p class="contentSecond">scroll 이벤트~</p>
</div>
</article>
</section>
</body>
</html>
