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

Question

我正在使用以下代码在用户滚动时向站点标题添加一个类:

$(window).scroll(function() {

    if ($(this).scrollTop() > 170){
        $('.header').addClass('sticky');
    }

    else{
        $('.header').removeClass('sticky');
    }

});

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

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

Answer 1

As I understand it, the code runs when the user scrolls only and doesn't know the page is midway when the page is refreshed.

是的，没错。

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

---

1)

将固定 header 的回调分离在一个专用函数中:

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

将回调绑定(bind)到滚动事件:

$( window ).scroll( FixHeader );

最后:

How can I change this JS so that it runs on both the page load and when you refresh midway down the page.

当 DOM 准备就绪时调用回调:

$( FixHeader );

这是

的简写

$( document ).ready( FixHeader );

参见 jQuery documentation .

请注意，有些人建议将处理的事件(在我的解决方案中为 FixHeader)绑定(bind)到 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 事件“超出了等式”。无论是什么原因导致视口(viewport)移动，都会持续检查 scrollTop 位置。

这种方法解决了一个潜在的恼人问题，当用户滚动窗口“大约”170px 并且由于不断添加和删除类 sticky 标题开始闪烁时。

---

这两种解决方案都可以进一步改进，方法是在添加或删除 sticky 时将 header 的状态保存在变量中，然后检查变量以避免在不需要时添加或删除类。我把这个留给你......