Question

我有一个脚本：

$(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
            $('#header_wrapper').addClass('small');
    } 
    else {
            $('#header_wrapper').removeClass('small');
    }
     if ($(this).scrollTop() == 0) {
            $('#header_wrapper').removeClass('small');  
    }
});

当有人向下滚动时，只需添加/删除课程。（它正在改变标志）。但我不想改变那些较小的设备（手机/平板电脑等），所以我想“包装”它：

if (screen.width < 960) {
    alert('Less than 960');
}
else {

    alert('More than 960');
}

是否有人可以将这两者结合在一起？

Answer 1

您可以使用navigator.userAgent来检测手持设备。如果是，则不要为移动设备绑定滚动事件：

if( !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )             
{
$(window).scroll(function(){
   if ($(this).scrollTop() > 0) {
         $('#header_wrapper').addClass('small');
   } 
   else {
        $('#header_wrapper').removeClass('small');
   }
   if ($(this).scrollTop() == 0) {
        $('#header_wrapper').removeClass('small');  
    }
 });
}

Answer 2

或者您可以使用CSS媒体查询。如果尺寸小于???这个班不会被使用。你可以这样做：

    @media (min-width: ???){
      .small {


             }

$（window）.scroll与screen.width结合使用

2 个答案: