当用户滚动经过页面的某个部分时 jQuery 触发动作答案

【问题标题】：jQuery trigger action when a user scrolls past a certain part of the page当用户滚动经过页面的某个部分时 jQuery 触发动作
【发布时间】：2018-10-01 02:07:40
【问题描述】：

大家好，当用户滚动经过页面上的某些位置时，我需要一个 jQuery 操作来触发。这甚至可以用 jQuery 实现吗？我已经查看了 jQuery API 中的 .scroll ，但我认为这不是我需要的。每次用户滚动时它都会触发，但我需要它在用户经过某个区域时触发。

【问题讨论】：

标签： javascript jquery

【解决方案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/

【讨论】：

我用 $("header, footer").animate({ backgroundColor: "#fd9c3d" }, 1200);在 if 语句中，它似乎没有工作
只需在 if 语句内部和外部发出警报以测试事件是否正在触发。

【解决方案2】：

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

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

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

【讨论】：

刚刚在视差单页滚动应用上使用了waypoints.js。效果很好。我可以给你的一个提示是使用链接作为航点。将可见性设置为隐藏。您可以使用绝对定位来设置航点的高度。屏幕 1-1.

【解决方案3】：

为了在单个页面上只触发一次任何操作，我修改了 jondavid 的 sn-p 如下。

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

            }
    });

})

向下滚动到运行代码 sn-p

您可以在这里查看工作代码 sn-p 的示例；

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 after you have scroll down to 150px')
					$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 down this block to get an alert</p>
</body>

【讨论】：

为什么document.ready函数中有$符号？如果我说它有效，否则它不起作用。原因？ @Mursaleen
实际上有时 $ 没有像 WordPress 那样定义，但 jQuery 是在那里定义的。所以在这里把它放在 function($){ ... } 意味着 $=jQuery 。这就是为什么如果您从上面的代码中删除 $ 符号，它可能会在某些情况下停止工作。
我现在明白了。谢谢