Небольшое красивое дополнение
В одной из ранних версий bootstrap, на главной странице этого фреймворка увидел интересную фишку. При прокрутке страницы главное меню фиксировалось в верхней части страницы. Сегодня почему-то вспомнилось и решил реализовать такую вещь для livestreet. Как оказалось — очень просто.
В файле skin/тема/js/template.js в самом его конце добавляем скрипт:
Здесь число 130 — количество пикселей после прокрутки которых фиксируется блок меню.
Это решение для темы social и developer.
Для Вашей темы замените идентификатор блока меню #nav на идентификатор блока меню Вашей темы и подберите значение scrollTop (в моем случае оно равно 130)
Для темы synio используйте идентификатор #header.
Пример можно посмотреть здесь (просто прокрутите страницу вниз).
В файле skin/тема/js/template.js в самом его конце добавляем скрипт:
$(function(){
$(window).scroll(function(){
if ($(window).scrollTop()>130) {
$('#nav')
.css({
position: 'fixed',
top: 0,
left: 0,
width: '100%',
'border-radius': 0,
'z-index': '999999'
});
} else {
$('#nav')
.attr('style', '')
}
});
});
Здесь число 130 — количество пикселей после прокрутки которых фиксируется блок меню.
Это решение для темы social и developer.
Для Вашей темы замените идентификатор блока меню #nav на идентификатор блока меню Вашей темы и подберите значение scrollTop (в моем случае оно равно 130)
Для темы synio используйте идентификатор #header.
Пример можно посмотреть здесь (просто прокрутите страницу вниз).
51 комментарий
— лучше реализовать через .addClass() и .removeClass(), с соответствующим дополнением таблиц стилей;
— добавить проверку на hasClass перед изменением или, в моем случае, на пустое значение атрибута style, а то он очищается при каждом скролле;
— border-radius не кросс-браузерен;
— position: fixed в ie?
— а еще лучше в виде плагина
— и т.п.
Простора для творчества хоть отбавляй — я показал всего лишь способ)
Добавлен код устанавливающий ширину меню по контейнеру и само выравнивание:
Добавлен код удаляющий атрибут стиля у меню:
мне вот это нужно
а то картинка странная
Я ошибку сделал в слове. Теперь работает.
Чёрт. Раньше бы за оффтоп заминусовали бы до смерти, а сейчас чёрти, что твориться.
В template.js пробовал, не катит
$(window).scroll(function(){
if ($(window).scrollTop()>130) {
$('#navbar-inner')
.css({
position: 'fixed',
top: 0,
left: 0,
width: '100%',
'border-radius': 0,
'z-index': '999999'
});
} else {
$('#navbar-inner')
.attr('style', '')
}
});
});