jQuery：如何在 div 出现时触发事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4837772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: How can I trigger an event when a div comes into view?
提问by Matty
Is there some way I can fire an event with jQuery when the page scrolls far enough for a div to come into view?
当页面滚动到足以让 div 进入视野时，有什么方法可以用 jQuery 触发事件？
采纳答案by rcravens
I think you will have to hook into the scroll event and manually check. Here is a similar question:
我认为您必须挂钩滚动事件并手动检查。这是一个类似的问题：
Check if element is visible after scrolling
Hope that helps.
希望有帮助。
Bob
鲍勃
回答by kaelds
If you only need to fire once:
如果您只需要触发一次：
$(window).scroll(function(){
// This is then function used to detect if the element is scrolled into view
function elementScrolled(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
// This is where we use the function to detect if ".box2" is scrolled into view, and when it is add the class ".animated" to the <p> child element
if(elementScrolled('. box2')) {
// Your function here
}
});
Full answer: https://www.thewebtaylor.com/articles/how-to-detect-if-an-element-is-scrolled-into-view-using-jquery
完整答案：https: //www.thewebtaylor.com/articles/how-to-detect-if-an-element-is-scrolled-into-view-using-jquery
回答by Gokul
The waypoints plugin covers this and more. http://imakewebthings.com/jquery-waypoints/
航点插件涵盖了这一点以及更多内容。 http://imakewebthings.com/jquery-waypoints/
Docs: http://imakewebthings.com/jquery-waypoints/#docs
文档：http: //imakewebthings.com/jquery-waypoints/#docs
eg:
例如：
$('.someSelector').waypoint(function(direction){
//do stuff
},{
//bottom-in-view will ensure event is thrown when the element's bottom crosses
//bottom of viewport.
offset: 'bottom-in-view'
});
回答by Andrew Bucklin
A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view.
一个 jQuery 插件，它添加了一个可绑定的“inview”事件，用于检测元素何时滚动到视图中。
回答by Mohamad Shiralizadeh
if you want to trigger a function when bottom of view, hit top of your content, you can use this function:
如果你想在视图底部触发一个功能，点击你的内容顶部，你可以使用这个功能：
$('.ModuleWrapper').waypoint(function (direction) {
// Codes Here
}, {
offset: function () {
return $(this).height();
}
});
or when bottom of view, hit bottom of your content, you can use this function too:
或者在视图底部，点击内容底部时，您也可以使用此功能：
$('.ModuleWrapper').waypoint(function (direction) {
// Codes Here
}, {
offset: function () {
return -1 * $(this).height();
}
});
it uses waypoint
它使用航点
