用于移动设备的 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>