javascript - 滚动时导致 div 闪烁的脚本

Question

我正在学习 JavaScript。我创建了一个带有两个 div 的导航栏:

并添加了一个功能，以便当用户向下滚动时，第一个 div 将淡出:

$(document).ready(function() {
  var $nav = $('.first-nav'); //Caching element

  // fade in .navbar
  $(function() {
    $(window).scroll(function() {
      // set distance user needs to scroll before we start fadeIn
      if ($(this).scrollTop() > 275) {
        $nav.fadeOut("fast");
      } else {
        $nav.fadeIn();
      }

    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top pages">
  <div class="container-fluid first-nav">
    <button id="nav-toggle" data-target=".sidebar-right" data-toggle="sidebar" class="navbar-toggle toggle-right" type="button">
        <span></span>
        </button>
    <a href="" id="login-button">Login</a>
    <a href="/#get_quote"><button id="get_quote_navbar" name="get_quote_navbar" class="btn btn-login">Get Quote</button></a>
    <a href="tel:8774000232" class="phone-number-link"><i class="fa fa-phone"></i> (877) 400-0232</a>
    <!-- Logo -->
    <a href="/" class="navbar-brand" id="brand-desktop"></a>
    <!-- /Logo -->
    <a href="" id="nav-desktop">Home</a>
    <a href="" id="nav-desktop">For Home</a>
    <a href="" id="nav-desktop">For Business</a>
  </div>
  <div id="navigation" class="col-md-12 sub-nav">
    <div class="col-md-6 sub-nav-left">
      <a href="" id="sub-left">Commercial</a>
      <a href="" id="sub-left">Construction</a>
      <a href="" id="sub-left">Multy-family</a>
      <a href="" id="sub-left">Partnership</a>
    </div>
    <div class="col-md-3 sub-nav-right">
      <a href="/#get_quote"><button id="get_quote" name="get_quote_navbar" class="btn btn-quote">Get Quote</button></a>
    </div>

  </div>
</nav>

一切正常。在 CSS 中，我为最小和最大宽度创建了 @media。当我这样做时，对于桌面和平板电脑来说一切都很好，但是当我想为移动设备放置固定的第一个 div 时，JavaScript 会出现问题，并且在上下滚动时我会闪烁 div。

如何添加JS函数if (width < 1024) then $nav.fadeIn(); ？

Answer 1

尝试:

if ($(window).width() < 1024) {
    $nav.fadeIn();
}