Mobile vs Desktop Scroll/Resize Issues

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.

на основе OPS комментарий, это теперь работает на 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(); 
    }); 
});