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();
JP
이중표Frontend Engineer

3년차 프론트엔드 개발자. Next.js, React, TypeScript 기반 웹 애플리케이션 개발 전문. 대규모 트래픽 환경에서 SSR·ISR 렌더링 전략 설계 경험.

이력서 보기