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; */
}

iPad上的粘滞菜单无法正常工作

1 个答案: