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

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

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

谢谢！

Answer 1

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

例如：

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

插件的网站上有一些例子。

Answer 2

这篇文章对我来说比其他人更好： http : //www.teamdf.com/web/jquery-element-onscreen-visibility/194/

用法很简单：

 $('#element').visible() 

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

http://css-tricks.com/slide-in-as-you-scroll-down-boxes/

 function viewable() { $(".module").each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass("come-in"); }); } $(window).scroll(function() { viewable(); }); $(window).blur(function() { viewable(); }); 

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

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

Answer 3

Jquery.appear插件是解决此问题的最佳方法。

演示 。

Answer 4

如果你想要一个简单而有效的溶剂：

 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!'); }); 

Answer 5

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

Answer 6

我认为你指的是jQuery插件“Lazy Load”： http ： //www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin

从查看源代码看，插件看起来像是这样的：

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

Answer 7

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

1. 窗户高度
2. 窗口顶部的滚动距离值
3. 指定的或目标元素距窗口顶部的距离

考虑以下：

 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'); } }); 

代码片段演示：

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

 /* Sticky element on-scroll */ jQuery(window).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(), headerHeightOffset = jQuery('.fixed-header').outerHeight(); if ((windowHeight + windowScrollValFromTop) > elValFromTop) { console.log('element is in view!'); console.log(headerHeightOffset); jQuery('.will-change-el').addClass('fixed-el').css('top',headerHeightOffset).text('fixed'); } else { jQuery('.will-change-el').removeClass('fixed-el').css('top','0').text('static'); } // using template literals for multi-line output formatting // comment out to observe when target element comes into view console.log(` how far is the target element from the top of the window: ${elValFromTop} what is the target element's height: ${elHeight} what is the window height: ${windowHeight} what is the window's scroll value distance from the top: ${windowScrollValFromTop} what is the sum of the window height and its offset value from the top: ${windowHeight + windowScrollValFromTop} `); }); 

 /* || Reset & Defaults */ body { margin: 0; } * { box-sizing: border-box; font-family: arial; } /* || General */ .target-el { border-top: 1px solid #ccc; } .target-el, .will-change-el { transition: .7s; text-align: center; background: #ededed; border-bottom: 1px solid #ccc; } .fixed-el { position: fixed; left: 0; right: 0; top: 0; } .fixed-header { position: fixed; left: 0; right: 0; top: 0; height: 100px; text-align: center; background: #ededed; border-bottom: 1px solid #ccc; z-index: 9; } .buffer-el { height: 1000px; padding-top: 100px; background: whitesmoke; } 

  
 
Fixed Header
 
 
 
static
 
 
the target element