NavBar 有点生涩（jQuery、html、css）

Question

我的导航栏不时出现抖动的问题。它不会一直发生，这很有趣，但当它发生时它会困扰我。问题是在开始时向上/向下滚动时，有时会在打开/关闭时有些滞后。我正在使用谷歌浏览器。

它是使用 html、css 和 jquery 制作的。这是代码盘链接： https://codepen.io/JhnSnw/pen/prLwxa

我尝试了一些我在网上阅读的关于类似问题的内容，但没有奏效。任何形式的帮助都很棒。谢谢。

Answer 1

window.scroll 被触发每个滚动像素（至少在 Firefox 中），我猜这可能会对您的性能产​​生一些影响。为了限制事件的数量，可以使用 dethrottle 或 deboucen。

This webpage 有一个不错的插件，解释得很好：

可视化

虽然 $.throttle 旨在限制回调执行，但它的行为会根据 no_trailing 参数的使用方式略有不同。

使用 no_trailing 进行限制，指定为 false 或未指定：

第一行是触发事件的数量，第二行是可能触发的 detrottled 版本，例如每 50 毫秒（这仍然非常快！）。

---

您可能应用的另一个解决方案是逻辑函数。在您的代码中，您有一个 if/else。如果您滚动，您总是应用removeClass 或addClass，这不是性能的最佳选择。
您可以轻松记住您是否已经超过阈值，并且仅在再次更改时触发：

if (scrolled > navHeight){
    if( !scrolledPastThreshold ){
        $('.page-nav').addClass('off-canvas');
        scrolledPastThreshold = true;
    }
} else {
    if( scrolledPastThreshold ){
        $('.page-nav').removeClass('off-canvas');
        scrolledPastThreshold = false;
    }
}