Question

我正在尝试编写一个函数，以便在element进入视图时附加一个函数。

我的页面上有一系列元素，element1，element2，element3我想编写一个函数来检查其中任何一个是否在视口，而不是一个大的if语句。

我有以下情况，但这似乎没有效果，没有任何反应？

var $findme = $('.section').each();

function Scrolled() {
    var findmeOffset = $findme.offset(),
        findmeTop = findmeOffset.top,
        scrollTop = $(document).scrollTop(),
        visibleBottom = window.innerHeight;

    if (findmeTop < scrollTop + visibleBottom) {
        console.log('element is visible');
    }

}

function Setup() {
    var $top = $('#top'),
        $bottom = $('#bottom');

    $top.height(500);
    $bottom.height(500);

    $(window).scroll(function() {
        Scrolled();
    });
}

$(document).ready(function() {
    Setup();

});

样本

http://jsfiddle.net/Yh7x3/

Answer 1

这是一个解决方案：jsfiddle。

您的主要问题是您在$fimdme事件处理程序中使用scroll，导致它仅应用于第一个元素。将.each()调用到没有参数的元素根本没有效果。

这是新代码。我对其进行了修改，每次滚动时，警报会显示某个部分的文本，当且仅当它现在可见（在视口中）并且之前不可见时，无论是向下滚动还是向上滚动。

var $findme = $('.section');

function Scrolled() {
    $findme.each(function() {
        var $section = $(this),
            findmeOffset = $section.offset(),
            findmeTop = findmeOffset.top,
            findmeBottom = $section.height() + findmeTop,
            scrollTop = $(document).scrollTop(),
            visibleBottom = window.innerHeight,
            prevVisible = $section.prop('_visible');

        if ((findmeTop > scrollTop + visibleBottom) ||
             findmeBottom < scrollTop) {
            visible = false;
        } else visible = true;

        if (!prevVisible && visible) {
            alert($section.text());
        }
        $section.prop('_visible', visible);
    });

}

function Setup() {
    var $top = $('#top'),
        $bottom = $('#bottom');

    $top.height(500);
    $bottom.height(500);

    $(window).scroll(function() {
        Scrolled();
    });
}

$(document).ready(function() {
    Setup();
});

Answer 2

我认为问题与你的$ findme声明有关。您传递的是HTML元素数组，但在Scrolled（）中，您正在寻找一个特定的顶部偏移量。

如果传递一个特定元素的id而不是所有元素的类标识符，则您提供的演示将起作用。

也许您可以更新上面的代码，一次将一个标识符传递给Scrolled（）。我不确定如何在您的应用程序中完成此操作，抱歉。

当元素出现在视口运行功能中时

2 个答案: