javascript - 删除移动尺寸屏幕上的脚本操作

Question

我的 WordPress header 中有以下脚本，当用户向上而不是向下滚动(第一次除外)时，它会为我的 #s-nav 提供动画

但是我不希望它在移动设备上执行此操作(我希望能够在屏幕 < 768px 时更改 css)

<script>
  var didScroll;
  var lastScrollTop = 0;
  var delta = 5;
  var navbarHeight = $('nav').outerHeight();

  $(window).scroll(function(event) { didScroll = true; });

  setInterval(function() {
    if (didScroll) {
      hasScrolled();
      didScroll = false;
    }
  }, 250);

  function hasScrolled() {
    var st = $(this).scrollTop();
    if (Math.abs(lastScrollTop - st) <= delta)
      return;

    if (st > lastScrollTop && st > navbarHeight ) {
      // Scroll Down
      $('#s-nav').removeClass('nav-down').addClass('nav-up');
    } else {
      // Scroll Up
      if (st + $(window).height() < $(document).height()) {
        $('#s-nav').removeClass('nav-up').addClass('nav-down');
      }
    }
    lastScrollTop = st;
  }
</script>

html

<nav id="s-nav" class="row nav-down">
    ...
</nav>

CSS

#s-nav { position: fixed; }

这似乎不是最干净或最容易使用的代码，但它确实有效。但它适用于所有屏幕尺寸。

Answer 1

使用 $( window ).width() 是更好的选择

function hasScrolled() {
 if($( window ).width() > 768){

   //do what ever you want to do

  }
}