当元素出现在屏幕上时触发jquery事件

我想在元素出现在屏幕上时立即显示淡入淡出效果。在这个元素之前有很多内容，所以如果我触发document.ready上的efect，在某些分辨率下访问者不会看到它

当向下滚动后，元素变为可见时，是否可能触发事件？ 我几乎可以肯定我以前见过这种效果，但不知道如何实现它

---

谢谢大家!

快速搜索打开了jQuery的扩展，它允许您检查元素在视口中的可见性。如果您的元素不在视口中，请不要进行淡入动画。

我认为您指的是jQuery插件“惰性加载”：

从源代码来看，该插件似乎正在执行以下操作：

$('#item').one('appear', function () {
    // Do stuff here
});

---

jQuery Waypoints插件可能很有用。它提供了一种在屏幕上显示元素时触发操作的方法

例如：

$('.entry').waypoint(function() {
   alert('The element has appeared on the screen.');
});

---

上面有一些例子。

这篇文章比其他文章更适合我：

用法很简单：

$('#element').visible()

您可以在此处看到如何使用此插件创建效果：

如果你使用标签。（例如jQuery UI选项卡）必须检查选项卡是否处于活动状态

$(window).scroll(function() {
    if($('#tab-1').hasClass('active')) {
        viewable();
    }
});

是解决这个问题的最好办法

---

.

如果您希望在指定或目标元素滚动到视图中时触发事件，可以通过确定以下值来执行此操作：

窗高

从窗口顶部开始的滚动距离值

指定的或目标的元素到顶部的距离 窗口

考虑以下几点：

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

    var elValFromTop = Math.ceil(jQuery('.target-el').offset().top),
        windowHeight = jQuery(window).height(),
        windowScrollValFromTop = jQuery(this).scrollTop();

   // if the sum of the window height and scroll distance from the top is greater than the target element's distance from the top, it should be in view and the event should fire, otherwise reverse any previously applied methods
   if ((windowHeight + windowScrollValFromTop) > elValFromTop) {
        console.log('element is in view!');
        jQuery('.target-el').addClass('el-is-visible');
   } else {
        jQuery('.target-el').removeClass('el-is-visible');
   }

});

代码片段演示：

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

    var elValFromTop = Math.ceil(jQuery('.target-el').offset().top),
        windowHeight = jQuery(window).height(),
        windowScrollValFromTop = jQuery(this).scrollTop();

   // if the sum of the window height and scroll distance from the top is greater than the target element's distance from the top, it should be in view and the event should fire, otherwise reverse any previously applied methods
   if ((windowHeight + windowScrollValFromTop) > elValFromTop) {
        console.log('element is in view!');
        jQuery('.target-el').addClass('el-is-visible');
   } else {
        jQuery('.target-el').removeClass('el-is-visible');
   }

});

下面的代码片段演示了一个常见问题的工作示例：当指定的元素滚动到视图中时，将元素固定到视口中

/*滚动条上的粘性元素*/
jQuery（窗口）.on（'scroll'，function（）{
var elValFromTop=Math.ceil（jQuery（'.target el'）.offset（）.top），
elHeight=jQuery（'.target el'）.outerHeight（），
windowHeight=jQuery（window）.height（），
windowScrollValFromTop=jQuery（this）.scrollTop（），
headerheightofset=jQuery（'.fixed header'）.outerHeight（）；
如果（（窗高+窗高）>elValFromTop）{
log（'元素在视图中！'）；
控制台日志（headerheightofset）；
jQuery（'.will change el'）.addClass（'fixed-el'）.css（'top'，headerheightofset.text（'fixed'）；
}否则{
jQuery（'.will change el'）.removeClass（'fixed-el'）.css（'top'，'0'）.text（'static'）；
}
//使用模板文字进行多行输出格式化
//注释掉以观察目标元素何时进入视图
console.log(`
目标元素离窗口顶部有多远：${elValFromTop}
目标元素的高度是多少：${elHeight}
窗口高度是多少：${windowHeight}
窗口距顶部的滚动值距离是多少：${windowScrollValFromTop}
窗口高度及其从顶部的偏移值之和是多少：${windowHeight+windowScrollValFromTop}
`);
});
/*| |重置和默认值*/
身体{
保证金：0；
}
* {
框大小：边框框；
字体系列：arial；
}
/*| |概述*/
.目标el{
边框顶部：1px实心#ccc；
}
.目标el，
.会改变我的想法吗{
过渡：.7s；
文本对齐：居中；
背景：#ededed；
边框底部：1px实心#ccc；
}
.固定el{
位置：固定；
左：0；
右：0；
排名：0；
}
.固定收割台{
位置：固定；
左：0；
右：0；
排名：0；
高度：100px；
文本对齐：居中；
背景：#ededed；
边框底部：1px实心#ccc；
z指数：9；
}
.缓冲区el{
高度：1000px；
填充顶部：100px；
背景：白烟；
}

固定收割台
静止的
目标元素
如果需要简单有效的解决方案：

function elementInView(elem){
  return $(window).scrollTop() < $(elem).offset().top + $(elem).height() ;
};

$(window).scroll(function(){
  if (elementInView($('#your-element')))
  //fire at will!
    console.log('there it is, wooooohooooo!');
});

功能元素查看（元素）{
返回$（窗口）.scrollTop（）<$（元素）.offset（）.top+$（元素）.height（）；
};
$（窗口）。滚动（函数（）{
if（elementInView（$（“#您的元素”））
//随意开火！
console.log（'在那里，woooooooo！'）；
});
重复？可能还有另一个重复：这只在我们使用scroll时有效，但在浏览器中更改选项卡时无效。@Jek fdrv通常情况下，当您更改选项卡时，您使用的是“单击”，因此在同一时间启动附加代码没有问题。我使用热键更改选项卡，单击选项卡这不是通过单击触发事件bc它不是DOM模型。很好。调整以在元素开始出现时开始加载
return（$（窗口）.height（）+$（窗口）.scrollTop（））>$（obj.offset（）.top