Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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. Подскажите пожалуйста как мне сделать так что бы этот скрипт работал и для двух других классов?
Ответить с цитированием
  #2 (permalink)  
Старый 21.12.2018, 14:47
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

fdc,
Сообщение от fdc
При изменении разрешения исчезает один, заместо него появляется другой.
Каким образом? Скриптом? Вот там и запоминайте другой var header

Сообщение от fdc
класса #sp-header.
Сообщение от fdc
для двух других классов?
PS: это не классы, а id

Последний раз редактировалось Dilettante_Pro, 21.12.2018 в 14:49.
Ответить с цитированием
  #3 (permalink)  
Старый 21.12.2018, 15:36
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,205

var header = $('[id|=sp-header]');
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
HTA-приложение для радио Pianorama Magneto Ваши сайты и скрипты 42 22.01.2012 07:34
Новая система управления сайтом Scripto CMS deepslam Ваши сайты и скрипты 38 31.01.2011 14:55
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 13:31