Плавающий header для разных устройств
Здравствуйте, я недавно начал обучаться созданию сайтов. Использую joomla 3.
Возникла необходимость сделать плавающий header. Решил сделать его для разных устройств (десктоп, планшет, телефон) при помощи разных блоки в зависимости от типа устройства. Установлен bootstrap. При изменении разрешения исчезает один, заместо него появляется другой. Но работает толь один из них. Начал искать и обнаружил что для всего этого используется вот такой код:
// Stikcy Header
if ($('body').hasClass('sticky-header')) {
var header = $('#sp-header');
if($('#sp-header').length) {
var headerHeight = header.outerHeight();
var stickyHeaderTop = header.offset().top;
var stickyHeader = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyHeaderTop) {
header.addClass('header-sticky');
} else {
if (header.hasClass('header-sticky')) {
header.removeClass('header-sticky');
}
}
};
stickyHeader();
$(window).scroll(function () {
stickyHeader();
});
}
if ($('body').hasClass('layout-boxed')) {
var windowWidth = header.parent().outerWidth();
header.css({"max-width": windowWidth, "left": "auto"});
}
}
Он работает только для класса #sp-header. Два других я назвал #sp-header-tbl и #sp-header-mob. Подскажите пожалуйста как мне сделать так что бы этот скрипт работал и для двух других классов? |