Recouse Опубликовано 9 марта, 2014 Поделиться Опубликовано 9 марта, 2014 У себя на форуме хотел закрепить менюшку главную, но как только пишу position: fixed; она сжимается и меняет местоположение. Только на ipb такая проблема. Помогите кто знает. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Fedya Опубликовано 9 марта, 2014 Поделиться Опубликовано 9 марта, 2014 ну вообще так и должно быть.. положение указывай (top,left,right,bottom) и ширину (width: 100%; ) Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Recouse Опубликовано 9 марта, 2014 Автор Поделиться Опубликовано 9 марта, 2014 А может кто-то помочь с плавающим меню? Точнее реализовать это Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Fedya Опубликовано 9 марта, 2014 Поделиться Опубликовано 9 марта, 2014 что ты называешь "плавающим меню" Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Recouse Опубликовано 9 марта, 2014 Автор Поделиться Опубликовано 9 марта, 2014 Fedya, ну зафиксированное меню Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Viserion Опубликовано 9 марта, 2014 Поделиться Опубликовано 9 марта, 2014 Родительскому блоку назначать нужно relative, дочернему -- fixed с указанием парметров расположения: "top:0;" к примеру. В таком случае при прокрутке меню должно быть полностью сверху, но и будет двигаться вместе с окном. Подсмотри код у jc-mp.com, там неплохо сделано. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Recouse Опубликовано 9 марта, 2014 Автор Поделиться Опубликовано 9 марта, 2014 Viserion, ссылка на мой сайт у меня в профиле, вы посмотрите какое там расположение меню Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
KitsuneSolar Опубликовано 9 марта, 2014 Поделиться Опубликовано 9 марта, 2014 __htmlbook.ru/css/position __htmlbook.ru/css/width Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Recouse Опубликовано 9 марта, 2014 Автор Поделиться Опубликовано 9 марта, 2014 , и что это мне даёт? Только понятие об этих свойствах. RealUser 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Viserion Опубликовано 9 марта, 2014 Поделиться Опубликовано 9 марта, 2014 Так примерно? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Recouse Опубликовано 9 марта, 2014 Автор Поделиться Опубликовано 9 марта, 2014 Viserion, да, но ещё чтобы меню наверх перемещалось, а не так стояло Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Viserion Опубликовано 9 марта, 2014 Поделиться Опубликовано 9 марта, 2014 Не совсем понял. Чтобы липло к верху, когда переходит на fixed? Так реализовано в UI.X для XenForo. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Recouse Опубликовано 9 марта, 2014 Автор Поделиться Опубликовано 9 марта, 2014 Чтобы липло к верху, когда переходит на fixed? да Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Viserion Опубликовано 9 марта, 2014 Поделиться Опубликовано 9 марта, 2014 Вот код из JQ от UI.X: if ( $('html').hasClass('hasHeaderFixed') ) { var navigationTop = $('#navigation').offset().top; $(window).scroll(function(){ var windowTop = $(window).scrollTop(); if (navigationTop < windowTop) { $('#header').addClass('headerSticky'); if ($('#moderatorBar').length) { $('#moderatorBar').addClass('moderatorBarSticky'); } if ($('#loginBar').length) { $('#loginBar').addClass('loginBarSticky'); } } else { $('#header').removeClass('headerSticky'); if ($('#moderatorBar').length) { $('#moderatorBar').removeClass('moderatorBarSticky'); } if ($('#loginBar').length) { $('#loginBar').removeClass('loginBarSticky'); } } }); } Лишнее уберите, код для HTML доступен в скриншоте. Ширина обязательна, а вот top как раз от 0 до 10 px. Попробуйте сделать и скажите, получилось ли. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Recouse Опубликовано 9 марта, 2014 Автор Поделиться Опубликовано 9 марта, 2014 Viserion, я вас не понял Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Viserion Опубликовано 9 марта, 2014 Поделиться Опубликовано 9 марта, 2014 Подключайте библиотеку jQuery, в тело вставьте вот этот код: var navigationTop = $('#pimary_nav').offset().top; $(window).scroll(function(){ var windowTop = $(window).scrollTop(); if (navigationTop < windowTop) { $('#primary_nav').addClass('headerSticky'); } else { $('#primary_nav').removeClass('headerSticky'); } }); Этот код проверяет, не ниже ли граница окна, чем объект primary_nav (собственно, Ваш навбар) Далее, в общий стиль добавьте следующее правило: .headerSticky {top: 35px;z-index: 20;position: fixed;width: 85%;} Теперь отредактируйте .main-width, вписав туда position:relative; Сохраните и попробуйте прокрутить страницу так, чтобы панельки не стало видно, она сама должна будет выскочить наверх. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
KitsuneSolar Опубликовано 9 марта, 2014 Поделиться Опубликовано 9 марта, 2014 , и что это мне даёт? Только понятие об этих свойствах. Это даёт знания, как сделать плавающее меню и с необходимой шириной. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Recouse Опубликовано 10 марта, 2014 Автор Поделиться Опубликовано 10 марта, 2014 Подключайте библиотеку jQuery, в тело вставьте вот этот код: var navigationTop = $('#pimary_nav').offset().top; $(window).scroll(function(){ var windowTop = $(window).scrollTop(); if (navigationTop < windowTop) { $('#primary_nav').addClass('headerSticky'); } else { $('#primary_nav').removeClass('headerSticky'); } }); Этот код проверяет, не ниже ли граница окна, чем объект primary_nav (собственно, Ваш навбар) Далее, в общий стиль добавьте следующее правило: .headerSticky {top: 35px;z-index: 20;position: fixed;width: 85%;} Теперь отредактируйте .main-width, вписав туда position:relative; Сохраните и попробуйте прокрутить страницу так, чтобы панельки не стало видно, она сама должна будет выскочить наверх. не получается Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.