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

Question

我在页面上有一个导航栏，一旦它从桌面设备的顶部到达某个点，我想要坚持到顶部。在移动设备上（小于780），无论页面向下滚动多远，我都希望它始终坚持下去。

现在我遇到了一个问题，即两个窗口滚动/调整大小的事件都会继续打开和关闭样式，从而造成各种混乱。什么是重新调整此代码的好方法，以便在调整浏览器大小时正常运行并无缝运行？

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

using

＆＃13;

＆＃13;

＆＃13;

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