jQuery:切换滚动页上的标题类，如果页面不在顶部

Question

我有一个jQuery片段，当用户滚动页面时，它会在页眉上切换类tinyHead。

jQuery(document).ready(function($) {
    $(window).on('scroll touchmove', function () {
        $('#header').toggleClass('tinyHead', $(document).scrollTop() > 0);
    });
});

但是，如果用户在页面向下滚动后刷新页面，那么页面重新加载时，tinyHead类不在头上，这就没有问题。如果他们然后滚动类切换。

我需要的是脚本检查页面是否位于视图端口的顶部，如果没有，则需要添加类tinyHead。

谢谢

Answer 1

这是正常的，如果用户不执行scroll或touchmove，或者执行附加函数的任何事件，则永远不会执行回调函数。

您必须至少触发附加的回调函数一次，只需在执行绑定后伪造滚动事件即可：

jQuery(document).ready(function($) {
    $(window).on('scroll touchmove', function () {
        $('#header').toggleClass('tinyHead', $(document).scrollTop() > 0);
    }).scroll();  // << Add this
});

Answer 2

除了在滚动或触地移动事件中调用函数之外，您还必须在页面加载(或DOM就绪)时执行该函数。与其重复两次该函数，您还可以这样做：

jQuery(document).ready(function($) {
    var tinyHead = function() {
        $('#header').toggleClass('tinyHead', $(document).scrollTop() > 0);
    }

    // Call tinyHead() when DOM is ready / upon page load
    tinyHead();

    // Call tinyHead() when scroll or touchmove events are registered
    $(window).on('scroll touchmove', tinyHead);
});

p/s:在另一个注意事项上，您可能需要查看节流滚动事件 --有些浏览器“触发”了事件(即调用它太频繁)。由于tinyHead()是一个相当轻量级的函数，我个人认为控制滚动事件不会带来巨大的性能改进，但是如果您的tinyHead()函数计算量很大，您可能需要查看以下选项:)