当用户滚动到页面的某个部分时，jQuery触发动作

Hey all, I need a jQuery action to fire when a user scrolls past certain locations on the page. Is this even possible with jQuery? I have looked at .scroll in the jQuery API and I don't think this is what I need. It fires every time the user scrolls, but I need it to fire just when a user passes a certain area.

嘿，大家好，我需要一个jQuery动作，当用户滚动到页面上的特定位置时才会触发。这在jQuery中可行吗?我已经在jQuery API中查看了.scroll，我认为这不是我需要的。它每次用户滚动时都会触发，但我需要它在用户通过某个区域时触发。

3 个解决方案

#1

Use the jquery event .scroll()

使用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/

#2

Waypoints in jQuery should do it: http://imakewebthings.github.com/jquery-waypoints/

jQuery中的Waypoints应该这样做:http://imakewebthings.github.com/jquery-waypoints/

$('#my-el').waypoint(function(direction) {
  console.log('Reached ' + this.element.id + ' from ' + direction + ' direction.');
});

jQuery waypoints plugin documentation: http://imakewebthings.com/waypoints/guides/jquery-zepto/

jQuery waypoints插件文档:http://imakewebthings.com/waypoints/guides/jquery-zepto/

#3

To fire any action only once on a single page I have modified jondavid's snippet as following.

为了在一个页面上只触发一次操作，我修改了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

            }
    });

})

Here you can check example of working code snippet;

这里您可以查看工作代码片段的示例;

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>

#1