Показать сообщение отдельно
  #1 (permalink)  
Старый 18.12.2018, 18:45
fdc fdc вне форума
Новичок на форуме
Отправить личное сообщение для fdc Посмотреть профиль Найти все сообщения от fdc
 
Регистрация: 18.12.2018
Сообщений: 1

Плавающий 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. Подскажите пожалуйста как мне сделать так что бы этот скрипт работал и для двух других классов?
Ответить с цитированием