jQuery scroll 위치 감지하여 버튼 숨기기

Eddy·2022년 12월 16일
0

jQuery

목록 보기
6/7

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();

0개의 댓글