Форум Сайтостроение Веб-строительство

Вопрос по JS

1 234
nezabor
На сайте с 19.07.2010
Offline
152
nezabor
#31

Dram, а почему именно JS, не проще ли меню делать на CSS. Адаптивность в полном смысле слова.

Чудес не бывает...
D
На сайте с 28.06.2008
Offline
1108
Dram
#32

Решил я снова заняться этим вопросом ибо раньше так и не добился желаемого.

итак я остановился на таком коде

if(!sTop3) {
sTop3 = jQuery('#tabs-menu').offset().top;
}
if (document.documentElement.scrollTop > sTop3 || self.pageYOffset > sTop3) {
jQuery('#tabs-menu').css("position", "fixed");
jQuery('#tabs-menu').css("top", "0px");
jQuery('#tabs-menu').css("margin-top", "0px");
jQuery('#tabs-menu').css("z-index", "100");
jQuery('#tabs-menu').css("max-width", "747px");
jQuery('#tabs-menu .active').css("border-bottom-color", "#E86500");
jQuery('#tabs-menu li').css("border-top-left-radius", "0px");
jQuery('#tabs-menu li').css("border-top-right-radius", "0px");
} else if (document.documentElement.scrollTop < sTop3 || self.pageYOffset < sTop3) {
jQuery('#tabs-menu').css("position", "static");
}
if (self.pageYOffset + document.documentElement.clientHeight > document.documentElement.scrollHeight) {
jQuery('#tabs-menu').css("position", "static");
}
$(window).resize(function(){
if($(window).width()>=1024 ) { jQuery('#tabs-menu').css("position", "fixed"); }
else { jQuery('#tabs-menu').css("position", "static"); }
});
window.addEventListener('orientationchange', function() {
if($(window).width()>=1024 ) { jQuery('#tabs-menu').css("position", "fixed"); }
else { jQuery('#tabs-menu').css("position", "static"); }
}, false);
$(document).ready(function(){
if($(window).width()>=1024 ) { jQuery('#tabs-menu').css("position", "fixed"); }
else { jQuery('#tabs-menu').css("position", "static"); }
});

В итоге на дескопе все работает, н на мобилах эти же вкладки у меня прописаны так

@media only screen and (max-device-width: 568px) and (min-device-width: 375px)
#tabs-menu {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 100;
margin-bottom: 0;
font-size: 16px;
}

В итоге при загрузке на мобилах я получаю все как надо, вкладки прилипшие к нижней границе экрана. Но стоит дернуть экран

вкладки возвращаются на свое место и не плавают.

ИТОГО СНОВА ВОПРОС - как сделать чтобы код плавающих вкладок ВООБЩЕ не включался / не вмешивался в работу стилей при разрешении менее 1024 ?

Key Collector - автоматизированная Домен .ru 80 рублей! Размер заголовков DLE
D
На сайте с 28.06.2008
Offline
1108
Dram
#33

Попробовал так

if(!sTop3) {
sTop3 = jQuery('#tabs-menu').offset().top;
}
if (document.documentElement.scrollTop > sTop3 || self.pageYOffset > sTop3) {
jQuery('#tabs-menu').css("position", "fixed");
jQuery('#tabs-menu').css("top", "0px");
jQuery('#tabs-menu').css("margin-top", "0px");
jQuery('#tabs-menu').css("z-index", "100");
jQuery('#tabs-menu').css("max-width", "747px");
jQuery('#tabs-menu .active').css("border-bottom-color", "#E86500");
jQuery('#tabs-menu li').css("border-top-left-radius", "0px");
jQuery('#tabs-menu li').css("border-top-right-radius", "0px");
} else if (document.documentElement.scrollTop < sTop3 || self.pageYOffset < sTop3) {
jQuery('#tabs-menu').css("position", "static");
}
if (self.pageYOffset + document.documentElement.clientHeight > document.documentElement.scrollHeight) {
jQuery('#tabs-menu').css("position", "static");
}
$(window).resize(function(){
if($(window).width()<1024 ) {
jQuery('#tabs-menu').css("position", "fixed");
jQuery('#tabs-menu').css("bottom", "0px");
jQuery('#tabs-menu').css("left", "0px");
jQuery('#tabs-menu').css("z-index", "100");
jQuery('#tabs-menu').css("width", "100%");
jQuery('#tabs-menu .active').css("margin-bottom", "0px");
jQuery('#tabs-menu li').css("font-size", "16px");
}
});

теперь почти как нужно - только на мобилах вкладки прилипают к верху экрана, а не к низу.

Как их прилепить к низу?

1 234

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий