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

Question

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

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

这个功能本来没有问题，但是如果用户在向下滚动页面后刷新页面，那么当页面重新加载时，标题栏上的tinyHead类将不会出现。如果他们之后再次向下滚动页面，该类别就会切换显示。

我需要脚本检查页面是否在视口的顶部，如果不是，则添加tinyHead类名。

谢谢。

- David Brooks

---

当人们对问题进行负面评价而不说明原因时，这真的让我很烦。 - David Brooks

Answer 1

这很正常，如果用户没有滚动、触摸移动或执行您附加的事件，您的回调函数将永远不会被执行。

您必须至少触发一次附加的回调函数，您可以通过在绑定后简单地伪造一个滚动事件来实现：

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

- Nabil Kadimi

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

---

附带一提，你可能需要了解throttle scroll event的知识——有些浏览器会过度触发该事件（即过于频繁地调用它）。由于tinyHead()函数相当轻巧，我个人认为限制滚动事件不会带来显著的性能改进，但如果你的tinyHead()函数计算量较大，那么你可能需要考虑这个选项 :)

- Terry