jquery - 去除移动设备中 header 的粘性

Question

我被困在一个地方。我想去除移动设备中 header 的粘性，而它在更大的屏幕上应该保持不变。到目前为止我尝试过的是这个，但这是基于顶部滚动并导致问题的。我是 jquery 的新手，到目前为止能够将这个脚本从互联网粘贴到我的代码中

<script type="text/javascript">
    var lastScrollTop = 0;  
    var st; 
    jQuery(window).scroll(function(event)
    {       
         st = jQuery(this).scrollTop();
         if (st == 0)       
         {                 
             jQuery(".main-header").removeClass("sticky-head");        
             jQuery('.main-header').stop().animate({top:'0px'},1000);
             jQuery('.main-header').css("height", 135);     
         }      
         else if (st > lastScrollTop || st < lastScrollTop)
         {              
             jQuery(".main-header").addClass("sticky-head");            
             jQuery('.main-header').stop().animate({top:'-75px'},900);          
             jQuery('.main-header').css("height", 140);     
         } 
         else 
         {                  
             jQuery('.main-header').stop().animate({top:'-75px'},1000);     
         }      
         lastScrollTop = st;    
    });            
</script>

Answer 1

只需检查滚动条上的移动设备，如果 true 如下所示，则返回

jQuery(window).scroll(function(event)
{       
     if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        return;//just get out from this event
     } //check if this is a mobile device

     st = jQuery(this).scrollTop();
     if (st == 0)       
     {                 
         jQuery(".main-header").removeClass("sticky-head");        
         jQuery('.main-header').stop().animate({top:'0px'},1000);
         jQuery('.main-header').css("height", 135);     
     }      
     else if (st > lastScrollTop || st < lastScrollTop)
     {              
         jQuery(".main-header").addClass("sticky-head");            
         jQuery('.main-header').stop().animate({top:'-75px'},900);          
         jQuery('.main-header').css("height", 140);     
     } 
     else 
     {                  
         jQuery('.main-header').stop().animate({top:'-75px'},1000);     
     }      
     lastScrollTop = st;    
});