Question

我正在尝试使用 This 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 () {更改为$(body).scroll(function () {和$(document).scroll(function () {，但它不起作用！你能告诉我我做错了什么吗？感谢

Answer 1

您可以收听scroll对象的window事件，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用于滚动事件侦听器

您也想要针对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 Demo

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

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

4 个答案: