在重新加载之前已经发生滚动时，每当重新加载页面时应用 Jquery 滚动功能答案

【问题标题】：Jquery scroll function to apply whenever page is reloaded when scrolling had already taken place before the reload在重新加载之前已经发生滚动时，每当重新加载页面时应用 Jquery 滚动功能
【发布时间】：2021-05-28 14:44:17
【问题描述】：

我已经知道我可以使用jQuery scroll() 方法将scrolled 类应用到我的导航栏，然后我可以做一些有趣的事情，比如在用户向下滚动时更改导航栏的背景颜色。

$(document).scroll(function () {
    var $nav = $("nav.fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});

但是，当用户已经滚动（并因此应用了滚动类）然后重新加载页面时，此方法会失败。立即重新加载，没有滚动类。它会导致一些难看的 UI。

如何更改此代码，以便在页面加载时检查页面是否不在顶部，如果不在，仍应用滚动类？这样，如果用户滚动到中间并重新加载页面，浏览器就能够应用scrolled 类并因此应用适当的 css？

例子：

【问题讨论】：

标签： javascript html jquery css scroll

【解决方案1】：

在就绪事件中，您可以检查用户是否滚动

$(document).ready(() => {
    $nav.toggleClass('scrolled', 0 < $(window).scrollTop());
});

【讨论】：

【解决方案2】：

当您的页面正在加载（并且您正在滚动）时，很有可能 jQuery 尚未加载，因此您的代码中不会触发滚动事件。

您可以使用$("html").scrollTop() 获取用户（页面加载后）滚动的像素数。如果这是0，则表示您位于页面顶部。

$(document).scroll(function () {
    let $nav = $("nav.fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
}).ready(function () {
    let $nav = $("nav.fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});

页面加载后将触发.ready() 事件。

【讨论】：

这解决了我的问题。页面完全加载后，如果您不在页面顶部，它会添加类。非常感谢！
@EugeneNyawara 如果这是您问题的解决方案，请随时将我的回答标记为已接受。选择一个接受的答案有助于其他有类似问题的人找到正确的解决方案