1
我有一個粘性菜單,只適用於桌面電腦,但不適用於iPad。當我在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;
}
}
是的,這就是我想的第一件事是改變那個屏幕寬度。很容易在電腦上看到結果,但無論屏幕寬度設置如何,它都不會影響iPad或智能手機。還有其他建議嗎?謝謝。 –