Почему бы не навбар исправить на вершину?

Question

Этот код работает, когда я убираю проверку ширины окна. Как только я добавляю ссылку на ширину окна, код больше не работает. Я хочу, чтобы навигационная панель фиксировалась только на экранах размером менее 768 пикселей. Я ржавый с jQuery, поэтому помощь приветствуется.

$(document).ready(function() {
  var width = $(window).width();

  $(window).scroll(function() {
    if ($(width) < 768) {
      if ($(this).scrollTop() > 567) {
        $('.navbar').css('position', 'fixed').css('top', '0');
      } else {
        $('.navbar').css('position', 'relative');
      }
    } else {
      $('.navbar').css('position', 'relative');
    }
  })

  $(window).resize(function() {
    if ($(width) < 768) {
      if ($(this).scrollTop() > 567) {
        $('.navbar').css('position', 'fixed').css('top', '0');
      } else {
        $('.navbar').css('position', 'relative');
      }
    } else {
      $('.navbar').css('position', 'relative');
    }
  });
});

Answer 1

Основная проблема заключается в том, что вы помещаете width в объект jQuery, когда в этом нет необходимости. Просто используйте width непосредственно в условиях:

if (width < 768)

При этом ваш код может быть увеличен на DRY, а также улучшен за счет использования классов CSS и медиазапросов. Попробуйте это:

jQuery(function($) {
  $(window).on('scroll resize', function() {
    $('.navbar').toggleClass('fixed', $(this).scrollTop() > 567);
  });
});

html,
body {
  height: 2000px;
  padding: 0;
  margin: 0;
}

.navbar {
  padding: 10px;
  background-color: #CCC;
}

@media only screen and (max-width: 768px) {
  .navbar.fixed {
    position: fixed;
    top: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">Navbar</div>