jquery - iPad 粘滞菜单无法正常工作

Question

我有一个粘性菜单，它只适用于台式机，但不适用于 iPad 或移动设备。当我在 iPad 上滚动时，菜单会消失，而不是保留在页面顶部。

这是我的 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

您的媒体查询强制要求将“isStuck”div 隐藏在 767 像素以下，即对于 ipad 和移动设备。如果你想让粘性菜单在 iPad 或移动设备上工作。简单地删除媒体查询:

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