iPad上的粘性菜單不起作用

Question

我有一個粘性菜單，只適用於桌面電腦，但不適用於iPad。當我在iPad上滾動時，菜單消失而不是留在頁面的頂部。

我對我的粘性菜單腳本使用tmstickup.js。還有幾行代碼在我的script.js和一些css中引用了tmstickup.js。

這是我的demo。

**tmstickup.js** 

(function($,undefined){ 
    var 
     def={ 
      stuckClass:'isStuck'    
     } 
     ,doc=$(document) 

    $.fn.TMStickUp=function(opt){ 
     opt=$.extend(true,{},def,opt) 

     $(this).each(function(){ 
      var $this=$(this) 
       ,posY//=$this.offset().top+$this.outerHeight() 
       ,isStuck=false 
       ,clone=$this.clone().appendTo($this.parent()).addClass(opt.stuckClass) 
       ,height//=$this.outerHeight() 
       ,stuckedHeight=clone.outerHeight() 
       ,opened//=$.cookie&&$.cookie('panel1')==='opened' 
       ,tmr 

      $(window).resize(function(){ 
       clearTimeout(tmr)    
       clone.css({top:isStuck?0:-stuckedHeight,visibility:isStuck?'visible':'hidden'}) 
       tmr=setTimeout(function(){ 
        posY=$this.offset().top//+$this.outerHeight()    
        height=$this.outerHeight() 
        stuckedHeight=clone.outerHeight() 
        opened=$.cookie&&$.cookie('panel1')==='opened' 

        clone.css({top:isStuck?0:-stuckedHeight}) 
       },40) 
      }).resize() 

      clone.css({ 
       position:'fixed'     
       ,width:'100%' 
      }) 

      $this 
       .on('rePosition',function(e,d){ 
        if(isStuck) 
         clone.animate({marginTop:d},{easing:'linear'}) 
        if(d===0) 
         opened=false 
        else 
         opened=true 
       }) 

      doc 
       .on('scroll',function(){ 
        var scrollTop=doc.scrollTop() 

        if(scrollTop>=posY&&!isStuck){      
         clone 
          .stop() 
          .css({visibility:'visible'}) 
          .animate({ 
           top:0 
           ,marginTop:opened?50:0 
          },{ 

          }) 

         isStuck=true 
        } 

        if(scrollTop<posY+height&&isStuck){ 
         $('.js-search').removeClass('active'); 
         clone 
          .stop() 
          .animate({ 
           top:-stuckedHeight 
           ,marginTop:0 
          },{ 
           duration:200 
           ,complete:function(){ 
            clone.css({visibility:'hidden'}) 
           } 
          }) 

         isStuck=false 
        }   
       })    
       .trigger('scroll') 
     }) 
    } 
})(jQuery) 

**script.js** 

include('js/tmstickup.js'); 
$(window).load(function() { 
    if ($('html').hasClass('desktop')) { 
     $('#stuck_container').TMStickUp({ 
     }) 
    } 
}); 

**style.css** 

.stuck_container { 
    padding: 40px 0 43px; 
    background: #0fcabf; 
    background-image:url('../images/graph.png') 
} 

.isStuck { 
    z-index: 999; 
    padding: 20px 0 23px; 
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15); 
    -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15); 
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15); 
} 
.isStuck .sf-menu > li > ul { 
    top: 39px; 
} 

@media only screen and (max-width: 767px) { 
    .isStuck { 
    display: none !important; 
    } 
} 

Answer 1

CSS據說隱藏菜單時，寬度小於767px，不僅ipad公司，嘗試調整瀏覽器下方寬767px就可以看到問題

@media only screen and (max-width: 767px) 
.isStuck { 
    /* display: none !important; */ 
}