Question

我的wordpress标题中有以下脚本，当用户向上滚动而不是向下滚动时（第一次除外）动画我的＃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

  }
}

Answer 2

要根据视口大小更改CSS，您可以使用媒体查询：

@media (max-width: 768px) {
  .nav-up {
    /* empty */
  }
  .nav-down {
    /* empty */
  }
}

当视口小于768px时，这会删除这些类的样式，这会阻止动画。

Answer 3

你必须像这样做一个简单的检查：

<?php

 if ( !wp_is_mobile() ) {

?>

   <script>YOUR SCRIPT HERE OR JUST LOAD THE JS FILE</script>

<?php

 }

?>

祝你好运：）

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

3 个答案: