javascript - jQuery:在滚动时切换标题类，如果页面不在顶部

Question

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

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

这没有问题，但是，如果用户在向下滚动后刷新页面，那么当页面重新加载时 tinyHead 类不在标题上。如果他们随后滚动该类，则会打开。

我需要的是让脚本检查页面是否位于视口(viewport)的顶部，如果不是，则添加类 tinyHead

谢谢

Answer 1

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

你必须至少触发一次附加的回调函数，你可以通过在绑定(bind)后伪造一个滚动事件来简单地做到这一点:

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