javascript - 移动与桌面滚动/调整大小问题

Question

我在页面上有一个导航栏，一旦它从桌面设备的顶部到达某个点，我想将其固定在顶部。在移动设备(小于 780)上，无论页面向下滚动多远，我都希望它始终保持不变。

现在我遇到了一个问题，即两个窗口滚动/调整大小事件都不断地打开和关闭样式，这会导致各种困惑。重新调整此代码的用途以使其在调整浏览器大小时正常运行并无缝运行的好方法是什么？

$(document).ready(function() {
  $(window).scroll(function() {
    var $box = $("#box");

    if ($(window).scrollTop() > 30) {
      $box.addClass("fixed");
    }

    if ($(window).scrollTop() < 30) {
      $box.removeClass("fixed");
    }

    if ($(window).width() > 780) {
      $box.removeClass("fixed");
    }

    if ($(window).width() < 780) {
      $box.addClass("fixed");
    }
  });

});

#box {
  width: 100%;
  background-color: red;
}

.fixed {
  position: fixed;
  top: 0;
}

<div id="box">
  This is the nav
</div>

<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>
<p>
  Content
</p>

Answer 1

首先检查窗口宽度，然后只有当它是桌面时，才检查 scrollTop。

根据 OP 评论，这现在在 resize 和 scroll 上运行

$(document).ready(function() {

    function headerFunction(){
        var $box = $("#box");

        if ($(window).width() < 780) {
            $box.addClass("fixed");
        } else {  // window is larger than 780
            if ($(window).scrollTop() > 30) {
                $box.addClass("fixed");
            } else { 
                $box.removeClass("fixed");
            }
        }
    }

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