블로그 · 2022년 12월 16일 · 읽기 1분
jQuery scroll 위치 감지하여 버튼 숨기기
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();