Javascript 为什么我的修复菜单在滚动时工作不顺畅。

为什么我的修复菜单在滚动时工作不顺畅。我正在我的moodle主题frontpage.php中使用，或者我必须添加一些平滑性方面的内容。

您修改DOM的频率太高，因为$window.scroll在一个滚动中多次启动。考虑在添加或移除类之前检查类的存在。

  $(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 5) {
        $('#page-header').addClass('fixed');


    } else {

        $('#page-header').removeClass('fixed');

    }

}).scroll();

此外，我还删除了脚本末尾的一个额外的.scroll调用

或者，您可以使用，它将在屏幕上添加一个伪类：并在浏览器中显示div。代码如下：

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 5) {
      if(!$('#page-header').hasClass('fixed')) {
        $('#page-header').addClass('fixed');
      }
    } else {
      if(!$('#page-header').hasClass('fixed')) {
        $('#page-header').removeClass('fixed');
      }
    }
});

---

查看插件是否适合您的需要。

您修改DOM的频率太高，因为$window.scroll在一个滚动中多次启动。考虑在添加或删除类之前检查类的存在。@猛禽，你的建议很好。请给出一个代码示例，并将您的评论转换为答案，如何？@Raptor Im大多数移动浏览器滚动事件仅在滚动发生后触发，而不是在用户滚动时触发。@null谢谢您的提示，但OP没有提到移动浏览器。在移动浏览器的情况下，由于代码在每个滚动事件中只执行一次，因此性能应该是正常的。@Raptor您是对的，我在moodle主题中使用的错误阅读，正如我在移动主题中使用的错误阅读一样。。。。。。。。。。。。。。。。。。。。。。。。。

$(document).scroll(function() {
    if($("#page-header").is(':onScreen')) {
        console.log("Element appeared on Screen");
        if(!$('#page-header').hasClass('fixed')) {
          $('#page-header').addClass('fixed');
        }
    } else {
        console.log("Element not on Screen");
        if(!$('#page-header').hasClass('fixed')) {
          $('#page-header').removeClass('fixed');
        }
    }
});