0
У меня есть липкое меню, которое работает только на настольных компьютерах, но не на iPad или мобильном устройстве. Когда я просматриваю 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;
}
}
Hi Bhagya Спасибо, но это не сработало. Любые другие предложения? –
@MonteOrganics Я не тестировал на самом устройстве, но даже если я уменьшаю количество браузеров ниже 767px, проблема была там, и это было связано с запросом на медиа, удаление медиа-запроса исправлено в браузере. – Bhagya
@MonteOrganics Я думаю, что вы удалили медиа-запрос из ваша демонстрационная страница и работает безупречно, когда вы уменьшаете окно браузера ниже 767px. Если это проблема с конкретным устройством, тогда нужно отладить его на устройстве. Но наверняка это проблема стиля. – Bhagya