javascript - 滚动和窗口加载或调整大小时导航栏更改

Question

我有这个问题，我无法正常工作。

我有一个必须在滚动时更改的导航栏（这部分工作正常）但是当窗口/视口 < 991px 时它也必须更改。

它确实有效，但我必须滚动才能应用效果。这是我的代码：

    $(document).ready(function()
    {
      var $navbar = $('.navbar');
      // ----------
      $(function()
      {
        $(window).scroll(function()
        {
          if(($(window).scrollTop() > 60 && $(window).on('load resize').width() > 992) || ($(window).on('load resize').width() < 992))
          {
            $navbar.addClass("compressed");
          }
          else
          {
            $navbar.removeClass("compressed");
          }
        });
      });
    });

如果我缩小浏览器，什么也不会发生。在第一次滚动时，它可以正常工作。加载或调整窗口大小时应该如何触发它？

谢谢！

标签： javascriptjquery

Answer 1

只需替换这个：

$(window).scroll(function() {...});

有了这个：

$(window).on("load scroll resize", function() {...});

这将导致在任何列出的事件上调用该函数。