HTML
...
...
<div class="introduce" id="eventArea">
스크롤이 이곳에 다다르면 버튼이 사라집니다.
</div>
...
...
<div class="scroll_event_area off">
<button class="btn_scroll_event" data-target="#eventArea">
이동하기
</button>
</div>
.off {
display: hidden;
}
jQuery
let $target_list = $('.scroll_event_area');
let $list_area = $target_list.find('.btn_scroll_event').data('target');
var getSize = function getSize() {
var currentPosi = 0;
var areaPosi = $($list_area).length ? $($list_area).offset().top : 0;
var winHeight = $(window).height();
currentPosi = $(window).scrollTop() + winHeight;
if (currentPosi > areaPosi) {
$target_list.addClass('off');
} else {
$target_list.removeClass('off');
}
};
$(window).scroll(function () {
getSize();
});
$(window).resize(function () {
getSize();
});
getSize();