在滚动事件上添加和删除类

我试图通过使用此DEMO添加类或删除类获取元素顶部。 这是代码：

$(document).ready(function () { var sec1_offset = $("#sec1").offset(); var sec2_offset = $("#sec2").offset(); var sec3_offset = $("#sec3").offset(); var sec4_offset = $("#sec4").offset(); var sec5_offset = $("#sec5").offset(); var sec6_offset = $("#sec6").offset(); var sec7_offset = $("#sec7").offset(); $("section").scroll(function () { if (sec4_offset.top < 100) { alert("You Are in Sec 4"); } }); }); 

我也改变了$("section").scroll(function () { to $(body).scroll(function () {和$(document).scroll(function () {但是它不起作用！你能吗？请让我知道我做错了什么？谢谢

Answer 1

您可以监听window对象的scroll事件， scroll事件就像resize事件一样多次，为了提高效率，您可以限制处理程序，即处理程序在指定的超时后执行。

 $(document).ready(function () { var $sec = $("section"), handle = null; var $w = $(window).scroll(function () { // clear the timeout handle clearTimeout(handle); // throttling the event handler handle = setTimeout(function() { var top = $w.scrollTop(); // filtering the first matched element var $f = $sec.filter(function() { return $(this).offset().top + $(this).height() >= top; }).first().addClass('active'); $sec.not($f).removeClass('active'); }, 50); }).scroll(); }); 

http://jsfiddle.net/UTCER/

编辑：如果要将类添加到另一个元素，最有效的方法是使用index方法：

 // Cache the object outside the `scroll` handler var $items = $('#menu li'); // within the `setTimeout` context: var $f = $sec.filter(function() { return $(this).offset().top + $(this).height() >= top; }).first(); $items.removeClass('active').eq( $sec.index($f) ).addClass('active'); 

Answer 2

使用$(window).scroll作为scroll事件监听器

你也想对window.scrollY检查sec4_offset.top

JS

 $(document).ready(function () { var sec1_offset = $("#sec1").offset(); var sec2_offset = $("#sec2").offset(); var sec3_offset = $("#sec3").offset(); var sec4_offset = $("#sec4").offset(); var sec5_offset = $("#sec5").offset(); var sec6_offset = $("#sec6").offset(); var sec7_offset = $("#sec7").offset(); $(window).scroll(function () { if (window.scrollY >= sec4_offset.top) { alert("You Are in Sec 4"); } }); }); 

JSFiddle演示

Answer 3

使用$(window).scroll()

以下是jQuery文档中有关滚动事件的内容

当用户滚动到元素中的不同位置时，滚动事件被发送到元素。 它适用于窗口对象，也适用于可滚动框架和元素，其中溢出CSS属性设置为滚动（或当元素的显式高度或宽度小于其内容的高度或宽度时自动）。

Answer 4

我知道这个答案已经得到了回答，但是我想提供一个关于JSFiddle的替代答案，它可以在更加动态的范围内完成你所期待的。 我不会要求被选为答案，而只是作为对此问题的替代方法的参考

http://jsfiddle.net/mLfAq/5/

 $(document).ready(function () { var offsets = []; $('[id^="#sec"]').each(function() { offsets.push([$(this).attr('id'), $(this).offset().top + $(this).height()]); }); $(window).scroll(function () { for(var i = 0; i < offsets.length; i++) { if(offsets[i][1] > $(window).scrollTop()) { console.log('You are in ' + offsets[i][0]); return; } } }); });