Небольшое красивое дополнение

В одной из ранних версий bootstrap, на главной странице этого фреймворка увидел интересную фишку. При прокрутке страницы главное меню фиксировалось в верхней части страницы. Сегодня почему-то вспомнилось и решил реализовать такую вещь для livestreet. Как оказалось — очень просто.

В файле 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 комментарий

avatar
Интересно
avatar
Весьма интересно, да.
avatar
Спасибо! Давно было интересно — как это реализуется))
  • ASA
  • 0
avatar
Не очень-то. Когда в меню, в котором есть выпадающая менюшка (юзеровский дропдаун), закрепляешь, то дропдаун выпадает по-прежнему сверху, т.е. на старом месте.
avatar
делаете его дак же фиксируемо в стилях или же в пару строк кода через жс
avatar
Прикольно, это как у фейсбука.
avatar
честно говоря, реализация далека от идеала. Позже выложу что я использую
avatar
Вариантов действительно много:
— лучше реализовать через .addClass() и .removeClass(), с соответствующим дополнением таблиц стилей;
— добавить проверку на hasClass перед изменением или, в моем случае, на пустое значение атрибута style, а то он очищается при каждом скролле;
— border-radius не кросс-браузерен;
— position: fixed в ie?
— а еще лучше в виде плагина
— и т.п.

Простора для творчества хоть отбавляй — я показал всего лишь способ)
avatar
— лучше реализовать через .addClass() и .removeClass(), с соответствующим дополнением таблиц стилей;
— добавить проверку на hasClass перед изменением или, в моем случае, на пустое значение атрибута style, а то он очищается при каждом скролле;
.toggleClass()
avatar
Можно и так.
avatar
ждем, в виде плагина или просто код?
avatar
ждем что бы сравнить и выбрать лучшее)
avatar
классно, спасибо! сделаю у себя.
avatar
Немного негативно отношусь к таким штукам ведь по вертикали явно меньше пикселей чем по горизонтали и забивать шапку менюшкой… можно при наведении мыши на верхний край показывать её — это лучше чем она там болтается постоянно
avatar
Да, практической ценности от нее маловато, но красиво)
avatar
практическая ценность бывает, а шапка может быть небольшой по высоте. Опять же, все зависит от дизайна.
avatar
Круто! Я сделал у себя на сайте так же!
avatar
Flow — Это дело не работает…
avatar
Что именно не работает?
avatar
ну панель эта с flow не дружит… Ее просто нет, при добавлении кода.
avatar
Все работает, нужно было закрыть и вновь открыть браузер, чистка кеша не помогала…
avatar
Отличная идея, только немножко б доработать ее. Оно щас добавляет новую строчку, а если б к примеру для этого шаблона Synio лого, меню и автоизацию показывало, то есть крутишь вниз, а менюшка всегда на том же месте, было бы более эстетично
avatar
Весьма интересная фишка, однако на мой взгляд, плавующее меню нужно выравнять по центру, тюкю на разрешении, к у меня 1600*900 текст меню уползает влево, что не очень красиво
avatar
Ага у меня тоже самое, с оцентрованной менюшкой, наверное было бы лучше, т.к. все равно собо много тда не влепить, если конечно не делать ее саму больше по высоте. Большое спасибо за твик.
avatar
Что бы отцентровать меню нужно немного доработать код так:
$(function(){
    $(window).scroll(function(){
        if ($(window).scrollTop()>130) {
            $('#nav')
                .css({
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    width: '100%',
                    'border-radius': 0,
                    'z-index': '999999'
                }).find('ul').css({
                    margin: '0 auto',
                    width: $('#container').width()
                });
        } else {
            $('#nav')
                .attr('style', '')
                .find('ul').removeAttr('style');
        }

    });
});


Добавлен код устанавливающий ширину меню по контейнеру и само выравнивание:
.find('ul').css({
                    margin: '0 auto',
                    width: $('#container').width()
                })


Добавлен код удаляющий атрибут стиля у меню:
.find('ul').removeAttr('style');
avatar
И еще раз большущее спасибо, теперь все как надо!
avatar
Менюшка перекрывает всплывающие уведомления…
avatar
Нужно подобрать подходящий z-index.
avatar
Да, это понятно, спасибо.
<offtop> У Вас замечательный сайт с полезными метриалами, спасибо!</offtop>
avatar
В виде плагина это было бы супер… я давно про это думал…
avatar
код очень просто добавить, зачем плагин.
avatar
как ты сделал такую клевую прокрутку картинок, сверху?
  • Help
  • 0
avatar
Слайдер же
avatar
А где код взять?
avatar
а в начале топика по вашему что опубликовал автор?
avatar

мне вот это нужно
avatar
так это плагин слайдер, ищите в каталоге…
avatar
avatar
вот это мне нравится, а ты случаем не Павел Дуров)
а то картинка странная
avatar
К сожалению нет! я не Пашка)
avatar
а похож)
avatar
<шопот>Не верь ему. Это Пашка, просто хочет остаться Инкогнито.</шопот>
avatar
шопот не работает ты спалился, _MrFallen_ я и так знаю что это пашка, он тут частенько сидит
avatar
<Шёпот>...</Шёпот>
Я ошибку сделал в слове. Теперь работает.
avatar
не работает
avatar
Не разрушай мои мечты о теге «Шёпот».
Чёрт. Раньше бы за оффтоп заминусовали бы до смерти, а сейчас чёрти, что твориться.
avatar
сейчас минусы ставить нельзя
avatar
как можно реализовать такую шапку с шаблонами от Land?
В template.js пробовал, не катит
  • izqi
  • 0
avatar
Измените в коде, указанном в топике #nav на #navbar-inner
avatar
$(function(){
$(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', '')
}

});
});
avatar
вот так?
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.