Question

我需要在用户滚动一定数量后才能使用移动导航功能。当用户在桌面分辨率上滚动205px时，导航将没有问题。

屏幕尺寸低于767px后如何将其更改为64px？如何取消桌面jQuery在移动设备上生效？

当前桌面javascript：

$(window).scroll(function(){
    if ($(this).scrollTop() > 205) {
        $('.sidemenu').addClass('fixed');
    } else {
        $('.sidemenu').removeClass('fixed');
    }
});

当前的移动javascript：

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
          $(window).scroll(function(){
              if ($(this).scrollTop() > 64) {
                  $('.sidemenu').addClass('fixed');
              } else {
                  $('.sidemenu').removeClass('fixed');
              }
          })
     }
};

建议将不胜感激。

谢谢。

Answer 1

例如，当匹配媒体匹配时，您可以向android.security.keystore.KeyGenParameterSpec; android.security.keystore.KeyPermanentlyInvalidatedException; android.security.keystore.KeyProperties;添加课程mobile。

body

完成后，$(document.body).toggleClass('mobile', window.matchMedia('(max-width: 767px)').matches);只需获得正确的scrollTop值。

checkPosition

或者只是添加matchMedia测试而不是hasClass测试。

此外，我希望“固定容器”的高度是动态的。也许是这样的：

function checkPosition() {
    var scrollY = $(document.body).hasClass('mobile') ? 64 : 205;

    $('.sidemenu').toggleClass('fixed', $(window).scrollTop() > scrollY);
};

Answer 2

您可以像这样检查resize wvent中的屏幕尺寸

   var width;
   $(window).resize(function () {
        width = $("html").width();
    });

比滚动事件（或其他地方）你可以检查：

     if (width  <= 767) {
        // do some for small screen
     }
     else if (width > 767 && width < 1200) {
      // do some for medium screen
     }
     //if..

在某些屏幕尺寸中使用jQuery

2 个答案: