Подтвердить что ты не робот

Действие jQuery-триггера, когда пользователь прокручивается мимо определенной части страницы

Привет всем, мне нужно активировать jQuery, когда пользователь прокручивается мимо определенных мест на странице. Возможно ли это с помощью jQuery? Я посмотрел на .scroll в jQuery API, и я не думаю, что это то, что мне нужно. Он срабатывает каждый раз, когда пользователь прокручивает, но мне нужно, чтобы он срабатывал только тогда, когда пользователь прошел определенную область.

4b9b3361

Ответ 1

Используйте событие jquery.scroll()

$(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 150;             // set to whatever you want it to be

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

http://jsfiddle.net/babumxx/hpXL4/

Ответ 3

Чтобы запустить любое действие только один раз на одной странице, я изменил фрагмент jondavid следующим образом.

jQuery(document).ready(function($){

    $triggered_times = 0;

    $(window).on('scroll', function() {

            var y_scroll_pos = window.pageYOffset;
            var scroll_pos_test = 150;   // set to whatever you want it to be

            if(y_scroll_pos > scroll_pos_test && $triggered_times == 0 ) {

                //do your stuff over here

                $triggered_times = 1;   // to make sure the above action triggers only once

            }
    });

})

Здесь вы можете проверить пример рабочего фрагмента кода;

jQuery(document).ready(function($){

		$triggered_times = 0;

		$(window).on('scroll', function() {
				var y_scroll_pos = window.pageYOffset;
				var scroll_pos_test = 150;   // set to whatever you want it to be

				if(y_scroll_pos > scroll_pos_test && $triggered_times == 0 ) {
					alert('This alert is triggered when y_scroll_pos = 150')
					$triggered_times = 1;   // to make sure the above action triggers only once
				}
		});

	})
p {
    height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p>scroll this block to get the result</p>
</body>