移动版 jQuery 滚动

Question

我需要有关 Jquery 滚动功能的帮助。我想让滚动顶部位置在手机、平板电脑上 >= 300，在桌面上 >= 700。有谁知道怎么做？先感谢您。这是我的代码：$(window).scroll(function(){  if ($(window).scrollTop() >= 700) {      $('.content-item.odd').addClass('fixed-header');      $('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});  }    else {      $('.content-item.odd').removeClass('fixed-header');      $('.content-item.odd').removeAttr("style");  }});

Answer 1

您可以使用 jQuery 的.width()函数来获取窗口宽度并围绕您的函数构建一个 if 语句，如下所示：

$(window).scroll(function(){

//here we check the viewport width

if($(window).width() < "1024"){

//if the viewport width is less then 1024 scrolltop is 300

  if ($(window).scrollTop() >= 300) {

         $('.content-item.odd').addClass('fixed-header');

        $('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid    #fff"});

    }

      else {

        $('.content-item.odd').removeClass('fixed-header');

        $('.content-item.odd').removeAttr("style");

    }

}else{

    if ($(window).scrollTop() >= 700) {

         $('.content-item.odd').addClass('fixed-header');

        $('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid    #fff"});

    }

      else {

        $('.content-item.odd').removeClass('fixed-header');

        $('.content-item.odd').removeAttr("style");

    }

  }

});

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