[javascript] 사용자가 특정 요소로 스크롤 할 때 이벤트 트리거-jQuery 사용

사용자가 페이지의 특정 부분을 스크롤 할 때이 질문을 jQuery 트리거 작업 의 베스트 답변과 결합

var element_position = $('#scroll-to').offset().top;

$(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = element_position;

    if(y_scroll_pos > scroll_pos_test) {
        //do stuff
    }
});

최신 정보

요소가 맨 위가 아닌 화면의 중간에있을 때 트리거되도록 코드를 개선했습니다. 또한 사용자가 화면 하단을 누르고 함수가 아직 실행되지 않은 경우 코드를 트리거합니다.

var element_position = $('#scroll-to').offset().top;
var screen_height = $(window).height();
var activation_offset = 0.5;//determines how far up the the page the element needs to be before triggering the function
var activation_point = element_position - (screen_height * activation_offset);
var max_scroll_height = $('body').height() - screen_height - 5;//-5 for a little bit of buffer

//Does something when user scrolls to it OR
//Does it when user has reached the bottom of the page and hasn't triggered the function yet
$(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;

    var element_in_view = y_scroll_pos > activation_point;
    var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;

    if(element_in_view || has_reached_bottom_of_page) {
        //Do something
    }
});