如何在jQuery中使用此函数
我有以下jQuery函数，它应该检测元素首次滚动到页面上的视图时：
function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom = docViewTop)); } 我的思绪今天很难……我怎么能用这个function？
假设我想检测$('.guardrail360')何时进入视野。
好像你需要绑定滚动事件并在事件触发时进行检测。
$(window).scroll(function () { isScrolledIntoView('.guardrail360'); });
有几种方法可以做到这一点。 如果您关注用户体验和/或性能，请不要使用天真的window.scroll实现。
将处理程序附加到窗口滚动事件是一个非常非常糟糕的主意。 根据浏览器的不同，滚动事件可以激活很多，将代码放入滚动回调会减慢任何滚动页面的尝试（不是一个好主意）。 因此，滚动处理程序中的任何性能下降只会影响整体滚动的性能。 相反，最好使用某种forms的计时器来检查每X毫秒或附加滚动事件，并且只在延迟后运行代码（或者甚至在给定次数的执行之后 – 然后延迟）。
-John Resig，jQuery的创建者，在ejohn.org上
方法1：setInterval
首先，有一种使用计时器的天真方法：
var $el = $('.guardrail360'); var timer = setInterval(function() { if (isScrolledIntoView($el)) { // do stuff // to run this block only once, simply uncomment the next line: //clearInterval(timer); } }, 150);
方法2：window.scroll事件
然后使用滚动事件有一个微不足道但又疯狂的低效方式 （取决于浏览器，滚动事件每秒会触发数百次，所以你不想在这里运行很多代码，特别是不要触发的代码浏览器重排/重绘）。
曾经访问过一个网页，滚动页面感觉迟钝和紧张？ 这通常是由像这样的一段代码引起的：
var $el = $('.guardrail360'); $(window).on('scroll', function() { if (isScrolledIntoView($el)) { // do stuff } });
方法3：两全其美
适用于高流量网站的漂亮混合方法，正如John Resig在上述博客文章中提出的 ：
var $el = $('.guardrail360'), didScroll = false; $(window).scroll(function() { didScroll = true; }); var timer = setInterval(function() { if ( didScroll ) { didScroll = false; if (isScrolledIntoView($el)) { // do stuff // to run this block only once, simply uncomment the next line: //clearInterval(timer); } } }, 250);
方法4：节流/去噪
限制（调用之间的最小N毫秒）或去抖动（每个’突发’只有一次调用）模式也可用于有效地限制内部代码执行的速率。 假设您正在使用Ben Alman的jQuery油门/去抖动插件 ，代码如下所示：
var $el = $('.guardrail360'); // Throttling $(window).on('scroll', $.throttle( 250, function(){ if (isScrolledIntoView($el)) { // do stuff } })); // Debouncing $(window).on('scroll', $.debounce( 250, function(){ if (isScrolledIntoView($el)) { // do stuff } }));
（请注意，debouncing的行为与其他实现略有不同，但有时可能是您想要的，具体取决于您的用户体验场景）
if ( isScrolledIntoView('.guardrail360') ) { }
正如其他答案所建议的那样，你应该在$(window).scroll()使用act。 另外，为了使元素第一次滚动到视图中运行if语句，我为你创建了这个run_once函数：
$('window').on('scroll', function() { if ( isScrolledIntoView('.guardrail360') ) run_once(function() { // ... }); }); function run_once( callback ) { var done = false; return function() { if ( !done ) { done = true; return callback.apply( this, arguments ); } }; }