导航栏在滚动，窗口加载或调整大小时发生变化

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");
          }
        });
      });
    });

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

谢谢！

Answer 1

只需替换一下：

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

与此：

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

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