设置滚动量后运行动画的最有效方法

Question

我只是在某个部分被滚动

时试图淡化页面上的某些元素

当用户滚过标题时，应加载一些元素。

首先我得到标题高度：

var header_height = $('header').height();

然后我正在运行基于$window元素

的测试

$(window).scroll(function() {
        // if scroll past 50
        if ($(window).scrollTop() >= header_height) {
            console.log("scrolled " + header_height);
        } else {
            console.log("unscrolled " + header_height);
        }
    });

这很好用，但是每个像素滚动都会再次运行脚本。因此，尽管它有效，但我担心它效率不高。

有更好的方法吗？例如，一旦用户滚动header_height px，运行此事......

JSFiddle

Answer 1

让我们假设，jQuery中存在一个方法，当滚动高度超过header_height px时触发函数。在这种情况下，jQuery会做同样的事情，即检查滚动位置是否已达到header_height px。

因此，无论是否存在此要求的方法，代码段的性能应该相同。