Question

当用户滚动时，我使用以下代码将类添加到网站标题：

{{1}}

当用户最初滚动但在页面刷新时不起作用时，这是有效的。据我所知，代码在用户仅滚动时运行，并且在刷新页面时不知道页面处于中途。

所以我的问题是，如何更改此JS以便它在页面加载和页面中间刷新时运行？

Answer 1

据我所知，代码在用户仅滚动时运行，并且在刷新页面时不知道页面处于中途。

是的，没错。

解决方案很少。我建议两个：

1）

将修复标题的回调分开在专用函数中：

function FixHeader() {
    if ( $( window ).scrollTop() > 170 ) {
        $( '.header' ).addClass( 'sticky' );
    }
    else {
        $( '.header' ).removeClass( 'sticky' );
    }
}

将回调绑定到滚动事件：

$( window ).scroll( FixHeader );

最后：

如何更改此JS，以便它在页面加载和页面中间刷新时运行。

让DOM在准备就绪时调用回调：

$( FixHeader );

这是

的简写

$( document ).ready( FixHeader );

请参阅 jQuery documentation 。

请注意，有些人建议将处理过的事件（我的解决方案中为FixHeader）绑定到load事件。

我不会这样，因为load事件仅在整个页面加载完毕后才会触发，从而增加了相关的延迟。

function FixHeader() {
    if ( $( window ).scrollTop() > 170 ) {
        $( '.header' ).addClass( 'sticky' );
    }
    else {
        $( '.header' ).removeClass( 'sticky' );
    }
}



$( window ).scroll( FixHeader );

$( FixHeader );

2）

当用户滚动页面时，scroll事件以非常快的速度触发。每次调用回调时;这可能会损害一点点的性能。

另一个解决方案是等待DOM准备就绪，然后以合理的速度检查scrollTop：

function FixHeader() {
    if ( $( window ).scrollTop() > 170 ) {
        $( '.header' ).addClass( 'sticky' );
    }
    else {
        $( '.header' ).removeClass( 'sticky' );
    }

    setTimeout( FixHeader, 500 );
}

$( FixHeader );

FixHeader在DOM准备就绪时第一次被调用。

然后setTimeout( FixHeader, 500 );让函数每500毫秒执行一次（半秒 - 根据需要调整......）。

scroll事件“超出了等式”。无论是什么原因导致视口移动，都会连续检查scrollTop位置。

当用户在“170px周围滚动窗口并且标题因为连续添加和删除类sticky而开始争吵时，此方法解决了一个可能令人讨厌的问题。

通过在添加或删除sticky时保存标头的状态，然后检查变量以避免在不需要时添加或删除类，可以进一步改进这两种解决方案。我把它留给你......

Answer 2

您可以通过on()添加其他活动，以便在滚动和页面加载（或其他活动）时使用您的代码

$(window).on("scroll load", function() {
  // your code here
}

Answer 3

您应该将粘性类逻辑隔离在一个单独的函数中，该函数将在页面加载时调用，然后由jQuery scroll方法监视。这样，如果用户刷新其页面，您将检查加载是否应该是粘滞的。

顺便说一句，不需要使用jQuery，普通的标准javascript就可以完成seen here in this first google result的工作。

滚动事件未在页面重新加载时触发

3 个答案:

1）

2）