Делаем фиксированное меню при прокрутке страницы
Итак, задача на сегодня сделать меню, которое прилипает к верхней части браузера при прокрутке страницы.
Для работы нам понадобится библиотека jQuery и браузер с поддержкой CSS3.
Начнем с HTML структуры нашего меню, а она особо не отличается от всех остальных.
HTML структура меню
<div id="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Joolma</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">HTML5&CSS3</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
Безусловно, чтобы наше меню приобрело узнаваемый вид, мы его немного стилизуем.
CSS код меню
#menu {
width: 920px;
text-transform: uppercase;
text-align: center;
line-height: 50px;
background: #69c;
}
#menu ul {
padding:0;
margin:0;
}
#menu li{
display: inline;
list-style:none;
margin: 5px 10px;
}
#menu li a {
padding:5px 10px;
color:#fff;
text-decoration: none;
}
#menu li a:hover{
background: #36c;
color: #ff0;
}
Теперь после всех подготовительных работ мы можем приступить к решению самой задачи.
Для того чтобы меню прилипало к верху при прокрутке, нам необходимо две вещи:
- Первая – знать в какой позиции находится скрол браузера. При прокрутки страницы в нужный момент изменить стиль нашего меню.
- Вторая - создать отдельный класс для меню с фиксированною позицией и шириной на весь экран.
Что касается первой задачи, то с ней справится небольшой код jQuery, но сначала мы создадим отдельный стиль для нашего фиксированного и стандартного меню.
Отдельный классы для фиксированного и нормального состояния меню
#menu.default {
width:920px;
}
#menu.fixed {
position:fixed;
top:0; left:0;
width:100%;
}
Добавим новый класс к меню
<div id="menu" class="default">
jQuery код
Теперь код для первой задачи:
$(document).ready(function(){
var $menu = $("#menu");
$(window).scroll(function(){
if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){
$menu.removeClass("default").addClass("fixed");
} else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
$menu.removeClass("fixed").addClass("default");
}
});//scroll
});
Думаю, что код настолько прост, что в пояснении не нуждается. Но все же прокомментирую. Мы используем событие скролл окна браузера для постоянного отслеживания позиции полосы прокрутки, при данном событии. Написали условия проверки позиции скрола и состояния меню (фиксированное или нет), если мы прокрутили страницу вниз на указанное значение, то появляется фиксированный вариант. Второе условие для смены с фиксированного меню на стандартное.
Вот в принципе и вся реализация, но мы на этом не остановимся и пойдем дальше.
Немного CSS3 для красоты 🙂
Стилизуем наше меню с помощью CSS3, добавим теней, округлим углы и т.д. Добавим еще оин класс .alpha-bg, который будет содержать значения фона в формате rgba. Конечный вариант стилей:
#menu {
text-transform: uppercase;
text-align: center;
line-height: 50px;
background: #69c;
text-shadow:0 1px 1px black;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#menu ul {
padding:0;
margin:0;
}
#menu li{
display: inline;
list-style:none;
margin: 5px 10px;
}
#menu li a {
padding:5px 10px;
color:#fff;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu li a:hover{
background: #36c;
color: #ff0;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}
.default {
width:920px;
}
.fixed {
position:fixed;
top:-5px; left:0;
width:100%;
padding:10px 0;
-moz-box-shadow: 5px 5px 20px #333;
-webkit-box-shadow: 5px 5px 20px #333;
box-shadow: 5px 5px 20px #333;
}
.transbg {
background-color: rgba(60, 130, 190, 0.7)!important;
}
Получили красоту.
Добавим jQuery эффекты.
Теперь можно поиграться с эффектным появлением нашего меню. Используем метод hover для добавления и удаления прозрачности фона меню при наведении и удалении курсора.
$(document).ready(function(){
var $menu = $("#menu");
$(window).scroll(function(){
if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){
$menu.fadeOut('fast',function(){
$(this).removeClass("default")
.addClass("fixed transbg")
.fadeIn('fast');
});
} else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
$menu.fadeOut('fast',function(){
$(this).removeClass("fixed transbg")
.addClass("default")
.fadeIn('fast');
});
}
});//scroll
$menu.hover(
function(){
if( $(this).hasClass('fixed') ){
$(this).removeClass('transbg');
}
},
function(){
if( $(this).hasClass('fixed') ){
$(this).addClass('transbg');
}
});//hover
});//jQuery
В заключении можно сказать, что нет предела совершенству и продолжать играться со стилями, и эффектами можно еще долго.
Реализовать эту задачу можно и на чистом javaScript, но jQuery имеет больший интерес 🙂
На фоне данного урока появилась еще одна мысль: сделать расширение основного контента при исчезновении из вида боковой колонки (как ВКонтакте).
Если у вас есть вопросы, предложения, то сотавляйте их в комментариях ниже, спасибо 🙂
(26 голосов. Рейтинг: 4,35 из 5)
Загрузка...Рубрика: jQuery
Подписаться
Понравилась статья, подпишись и получи больше хорошего материала.
Первый(простой) пример – не работает.
Второй, с CSS3 отлично, но мне нужен простой.
Не можете глянуть, в чём проблема?
Все пофиксил, действительно в 10 строчках скрипта закралось пару строк мусора, что еще раз подчеркивает всю опасность копи-паста ))
Спасибо вам за бдительность ))
Вот ссылка на ваш (простой) пример: //jsfiddle.net/zStXH/
подскажи пожалуйста, а jQuery с эффектами куда закинуть нужно?
я с небольшим опытом. и на uCoz сайте
стили добавил, html тоже
Я не советую делать на ucoz сайты, попробуй на //hostinger.com
Я сам начинал с ucoz, и знаю как неудобно делать там сайты.
Здравствуйте. У меня похожий вопрос, только на reg.ru хостинг, немогу понять куда jQuery код нужно добавить и если просто новый файл с этим кодом создать, то как его обозвать чтобы он работал? Добавил блок с html, css в style и jQuery поначалу в новый созданный файл menu.js в папку на серваке js, прописал в блок с меню подключение jquery такого вида:
//
пробовал и попроще, но это на мой взгляд самый оптимальный, и ничего не вышло. Красивая синия менюшка появилась, однако она не залепает, иными словами jQuery не работает. Я не слишком силен во всем этом.. а особенно в js, если не сложно подскажите какой нибудь выход из этой ситуации.
Зарание спасибо 😉
Здравствуйте. Вы мне очень помогли, читаю вас постоянно. А как сделать что бы меню после прокрутки на определёноое количество пикселов появлялось плавно, а не рывком? Жду помощи.Заранее спасибо.
Спасибо!! Очень помогло:)))
А подскажите, как поменять лого на другой элемент при скролле как на //www.mebelrama.ru
Вот написал для вас пример такой реализации.
//jsfiddle.net/nGCf3/
Суть в создании внутри оберточного блока двух элементов (например: логотип и контакты), один из которых изначально будет скрыт.
В процессе прокрутки страницы мы меняем видимость этим элементам, таким образом, что один становится видимым, а второй тает на глазах 🙂
Здравствуйте! У меня сайт на ЮКОЗе и это меню у меня прячется за основной контент при прокручивании. Подскажите пожалуйста, в чем может быть дело? Спасибо!
Разобрался. Добавил z-index: 99999; и заработало. Спасибо за идею!
Ясно и понятно все написано, ОГРОМНОЕ СПАСИБО за статью!!!
очень нужная вещь, но подскажите, пожалуйста, как привязать скрипт к готовому меню на джумла. .
мне нужно для всего хедера такой эффект.. вставлял скрипт в готовый прикрепленный menu.js.. в исходнике выводило, но сам скрипт стилей не менял
п.с. подключено так же много плагинов с мутулз
Здравствуйте!
1) Нужно проверить подключена ли библиотека jQuery к вашему сайту.
2) В выборке jquery var $menu = $(“#menu”); укажите свое меню или весь хеддер сайта, значения особого нет.
3) Пропишите стили для фиксированной и нормальной позиции .default{}, .fixed{} и добавьте их в файл стилей своего шаблона.
Успехов, пишите если что 🙂
подключил и включил jQuery с помощью плагина,
все вышеперечисленное сделал…
остался один вопрос.. куда именно я могу вставить этот код? (ничем подобным раньше не занимался) и хватит ли такого:
$(document).ready(function(){
var $header = $(“#header”);
$(window).scroll(function(){
if ( $(this).scrollTop() > 100){
$header.addClass(“header-fixed”);
} else if($(this).scrollTop() <= 100) {
$header.removeClass("header-fixed");
}
});//scroll
});
если можно в какой-то php вставить, то что нужно дописать?
Тут несколько вариантов: вставить этот скрипт как есть в шаблон или сохранить его в отдельный файл.
Пойдем по второму пути т.к. в итоге он более практичен.
1. Сохраняем наш скрипт в файл, например: myscripts.js
2. Копируем его в папку скриптов вашего шаблона, путь должен быть примерно таким: ПАПКА_С_ДЖУМЛОЙ/templates/НАЗВАНИЕ_ШАБЛОНА/js/
3. В папке вашего !шаблона! находим файл index.php, открываем его для редактирования, находим закрывающийся тег </head> и перед ним вставляем
<script type=”text/javascript” src=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/myscrips.js”></script>
4. Сохраняем index.php и проверяем работоспособность скрипта на сайте!
PS. В скрипте лучше поменять это условия $(this).scrollTop() > 100 и
это $(this).scrollTop() < = 100, соответственно на такие: $(this).scrollTop() > $header.height();
$(this).scrollTop() <= $header.height(); тогда хеддер будет прилипать, только после его полной прокрутки.
Вставил вот такой код так, как вы сказали:
$(document).ready(function(){
var $header = $(“#sp-header-wrapper”);
$(window).scroll(function(){
if ( $(this).scrollTop() > 100 ){
$header.addClass(“header-fixed”);
} else if($(this).scrollTop() <= 100) {
$header.removeClass("header-fixed");
}
});//scroll
});
в headerfixed.js
и в index.php:
<script type=»text/javascript» src=»baseurl ?>/templates/template; ?>/js/headerfixed.js»>
заработал, но только на отдельных страницах Community Builder.. при том, что на этих страницах перестали работать все другие скрипты… по непонятной причине.. только что..
ищу что изменил, что такое произошло.. но пока, вот как то так
тыком нашел такое:
в плагине System – JB Library который включает JQ у меня
если Remove other jQuery виставляю в НЕТ, то все скрипты на страницах СВ перестают работать.. кроме созданного вами
Если честно не совсем понял в чем проблема, в таких случаях нужно смотреть в консоль. Если вы используете браузер Хром, то нажмите F12 и перейдите во вкладку console, посмотрите какие ошибки там пишет.
Что касается подключения библиотеки jQuery, то можете вместо встроенного плагина, добавить ее вручную в шаблон, также как и свой собственный скрипт, предварительно перенеся файл библиотеки в папку со скриптами в вашем шаблоне.
использую М.Фаерфокс.. тут ещё проще
посмотрел в консоль, заменил $ на jQuery, все заработало)
Спасибо, что научили пользоваться консолью)
Рад, что все получилось 🙂
Успехов вам!
встретил баг:
если содержимое на 100px больше размера экрана, ЭТО не дает докрутить до конца страници, а возвращает назад кверху (простое прокручивание колёсиком)
Этот баг только для вашего случая т.к. вы меняете положение всего хедера. Сделайте обертку для хедера, например <div class=“header-wrapper”> и стиль для обертки .header-wrapper {min-height:100px},
это должно решить проблему 🙂
Здравствуйте, может не в тему меню, но тоже фиксир. позиция. Есть код, подключаю его нифига не работает, не посмотрит кто-нибудь? В js не силен.
$(document).ready(function(){
//ф-я offset возвращает координаты отн-но начала страницы
var sidebartop = $(‘#jshop_module_wishlist’).offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > sidebartop )
{ // ф-я scrollTop() возвращает величину вертикального скроллинга
$(‘#jshop_module_wishlist’).css({position: ‘fixed’, top: ’30px’});
}
else
{
$(‘#jshop_module_wishlist’).css({position: ‘static’});
}
});
})
#jshop_module_wishlist это иденификатор модуля, кот. я хочу чтобы был фиксированным( в cms joomla)
Пож. посмотрите ошибки в коде. Всем спасибо…
Все у вас хорошо с кодом, вот сами посмотрите //jsfiddle.net/5aC7E/
единственный момент используйте одинарные кавычки вот такого вида -”, а сейчас у вас вот так – ‘’
Удачи вам 😉
Спасибо большое…
Сделал…код хор.
это из-за joomloвских стилей модулей он не подключался…еще раз спасибо…
Не подскажите какой код добавить в уже имеющийся, чтобы блок наш возвращался не только когда вверх обратно прокручиваем страницу, но и когда доходит до конца блока в котором он находится, например, наш блок находится в селекторе #right и как доходил до конца этого блока опять становился статичным
я так понимаю эта ф-я возвращает
var sidebartop = $(‘#jshop_module_wishlist’).offset().top;
вот здесь можно посмотреть пример
//trust-cc.ru/
чтобы он(блок фикс.) не находил уже на популярные материалы
Попробуйте указать нижнюю границу для опускания и тогда ваше условие измениться следующим образом
if( $(window).scrollTop() > sidebarTop || $(window).scrollTop() > sidebarBottom ), где sidebarBottom – это $(el).offset().top + $(el).height();
как-то так 🙂
Я очень плохо понимаю js….
т.е надо добавить это условие
if( $(window).scrollTop() > sidebarTop || $(window).scrollTop() > sidebarBottom )
пояснить sidebarBottom так?:
var sidebarBottom = $(el).offset().top + $(el).height();
можете пожалуйста целый код написать, а то я точно все неправильно
сделаю
height(здесь высота или так пусто и оставлять?);
Вы не думайте что я работать не хочу, просто пока знаний не хватает чтобы все организовать
Надеюсь, что вопрос еще актуален )
вот попробуйте сделать таким образом
//jsfiddle.net/5aC7E/1/
Добрый день! Помогите закрепить модуль (Joomla 3.x, GavickPro template)! Хочу закрепить модуль “topbar” при скроллинге, он изначально расположен вверху страницы по всей ширине и катается вместе с прокруткой.
Есть только один конкретный вопрос: помогите разобраться, в какой файл что вставлять (иногда путаю css и html). Прочитал достаточно ресурсов, но мало толку, когда не знаешь, куда копировать.
Добрый день, а как мне вам помочь? 🙂
Хочу закрепить модуль “banner topbar” в позиции “topbar” (в самом верху страницы) при скроллинге, то есть чтобы пролистывалась страница без этого модуля и он всегда был навиду. Читал и здесь, и в других ресурсах, как правило описано закрепление меню, в моем же случае – модуль. Помогите разобраться, что и где прописать для модуля
Киньте ссылку на сайт, как я могу без кода вам помочь?
gembiland.com, указал в комментарии)
Черная полоса с соц сетями и текстом вверху страницы – вот ее и надо закрепить.
В wordpress после нажатия “Читать далее” фиксированное меню закрывает начало продолжения статьи. Понятно что анкор выставляет продолжение статьи в верх окна браузера. Как это обойти?
Для начала ссылку или пример в студию 😉
Здравствуйте
Можете помочь сделать мне такую панель на joomle?
можем )
Баг. Если прокрутить колесико вниз, а потом резко вверх, то меню появляется в самом верху страницы. Как можно это исправить?
Извините за столь длительное молчание, все никак не доберусь до своего блога ))
Как вариант вы можете сделать время исчезновения меню равным нулю
и этот баг решится.
$menu.fadeOut(0,function(){ … });
Ссылка на пример
не получается
Опишите, что именно у вас не выходит?
Вот вам ссылка на пример данного кода,
возможно так вам будет удобнее разобраться
ССЫЛКА
А как сделать чтобы меню после прокрутки появлялось плавно? А не рывком?
Добрый день, уточните пожалуйста, вы спрашиваете про скорость появление меню или про смещение контента при появлении меню?
также посмотрите пример кода, возможно вам так будет удобнее экспериментировать с условиями для этой задачи 🙂
//jsfiddle.net/9h9ns/
//jsfiddle.net/zStXH/ у меня вот так, логотип меняется на номер после прокрутки, красиво. Я просто хотел бы чтобы меню появлялось плавно, как тут например. А сейчас оно появляется резко и смещает контент. Спасибо
Что касается смещения контента, то это происходит потому что мы вытаскиваем наше меню с его места на сайте и лепим к верхней границе. Чтобы этого избежать, вы можете добавить блоку в котором находится меню фиксированную высоту или при переходе меню от одного состояния к другому, добавлять его высоту к body, например $(‘body’).css(‘paddingTop’, ’40px’). Можно использовать и два меню, одно – стандартное, которое всегда будет на сайте, а второе фиксированное, которое будет появляться только при полной прокрутке первого. Если что не понятно описал, пишите 🙂
Можете мне помочь так сделать – “Можно использовать и два меню, одно — стандартное, которое всегда будет на сайте, а второе фиксированное, которое будет появляться только при полной прокрутке первого. Если что не понятно описал, пишите” на сайте //promimpexpro.ru за денюжку конечно)
К сожалению, на этой неделе я сильно загружен. Если время терпит, то можем пообщаться с понедельника.
Хорошо я подожду)
Привет! Напоминаю о себе)))
Ошибся ссылкой постом выше, вот так //jsfiddle.net/nGCf3/ 🙂
Как вариант, вы можете анимировать появления блока меню.
Вот ссылка на пример кода ссылка
Добавил два момента:
1. Сделал меню прозрачным .css(‘opacity’, 0)
2. Анимировал изменение свойства opacity .animate({opacity: 1}, 1000);
от 0 до 1 за 1000 миллисекунд
Надеюсь, что поможет 😉
Получилось в точности так, как я хотел. А как сделать два разных меню, а не одно стандартное и такое же фиксированное?
Тут все просто, у вас есть главное меню (в моем примере оно с клаcсом default идет), вы его дублируете и кидаете в самый низ сайта (скрываете его display:none), а дальше логика та же, при прокрутке страницы в момент скрытия главного меню, вы отображаете второе у него будут стили как у .fixed в моем примере.
Помогите пожалуйста примером, как сделать, чтобы второе меню открывалось при прокрутке.
Уточните, пожалуйста, что именно должно быть со вторым меню? Какая его роль и где оно должно располагаться в момент загрузки страницы и в процессе ее прокрутки?
Сайт сделан на cs cart, в нем есть основное меню. Хочу, чтобы при прокрутке страницы вниз появлялось меню как в Вашем примере.
Разобрался;)
Просто надо было сделать в css
#menu.default {
display:none
}
Спасибо за оперативность ответа! Все же утром лучше работается)))
//jsfiddle.net/ta6Ub/ Может вы и тут сможете мне помочь?
Тут я не совсем понял вашу задачу, но возможно это то, что вы хотели сделать //jsfiddle.net/ta6Ub/1/
Спасибо большое)
Здравствуйте. Снова я. У меня на сайте есть контент, несколько таких таблиц //primery.ucoz.ru/Untitled-1.gif, возможно ли сделать чтобы они плавно выезжали сбоку, из-за страницы при прокрутке вниз, и заезжали обратно за границы сайта при прокрутке вверх? Последнее что осталось сделать на моём сайте. И ещё, как сделать форму ввода сообщения растягиваемой по размеру, как у вас на сайте?
Доброй ночи, отличный вариант фиксированного меню.
А как доработать готовый jQuery код, так чтоб при прокрутке страницы до конца зафиксированное меню сверху пропадало (т. е. наверно класс менялся на Default)?
Пробовал вставлять вот это третим условием:
else if($(this).scrollBottom() = && $menu.hasClass(“fixed”)) {
$menu.fadeOut(‘fast’,function(){
$(this).removeClass(“fixed”)
.addClass(“default”)
.fadeIn(‘fast’);
});
}
Не сработало! Не могли бы вы подсказать что не так и вообще правилное направление у меня?
Здравствуйте, у меня есть вопрос. Я новичек и сайты руками полностью не делал, поэтому вопрос, куда вписывать эти коды?
Добрый день, тут нужно смотреть на конкретно ваш случай. Но если в общем, то код скрипта на jQuery нужно вставить в файл с расширением .js, а код стилей в файл – .css, все эти файлы обычно хранятся в корне вашего сайта или шаблона в соответственных папках /js и /css. Код html нужно править в файле шаблона отвечающим за вывод меню. Это все в общем, опишите ваш случай и может я смогу дат более предметный ответ 🙂
Добрый день. не могли бы вы мне помочь! Все делаю как написано, и все работает! Но на joomla отказывается( уже не знаю что делать! //jsfiddle.net/andrex87/54CP8/
кстати сайт – magpromtorg.ru/
Добрый день! А в какой файл вы вставили скрипт?
У вас на сайте вот такая структура главного меню
<div class="mytoolbar"> <ul class="menu"> ... </ul> </div>Но в стилях к нему я не увидел нужных свойств и самого состояния fixed – default.
Как сделать такое меню в wordpress? Возьму 1 из своих сайтов – в его шаблоне уже есть js файл меню, в стайле свой стиль, структура естественно задаётся в админке, включается в header.php через вот такой код:
‘primary-menu’, ‘container’ => ”, ‘fallback_cb’ => ”, ‘menu_class’ => $menuClass, ‘echo’ => false ) );
};
if ($primaryNav == ”) { ?>
<ul class="”>
<li ><a href="”>
Пробовал вставить как есть – отображался только вариант default, однако при скролле ничего не всплывало. fixed можно было увидеть лишь если прописать этот класс в html.
1. Пропишите в файле стилей для вашего сайта стили для состояний меню, .default и .fixed, можно взять их из этой статьи.
2. Вставьте свой код js из этой статьи в js файл вашего сайта, но замените значение идентификаторов на ваши var $menu = $(“ID_ВАШЕГО_МЕНЮ”);
Привет. Подскажите пожалуйста, как сделать чтобы плавающее меню появлялось после того как пользователь прокрутит основное. У меня меню побольше высота примерно 270px; я изменил в скрипте 100 на 600 все работает. Но при прокрутке до того места где должно появиться меню, прокрутка еще проскакивает примерно на такое же расстояние как высота меню.
1. Оберните ваше меню в контейнер, у которого будет фиксированная высота. Это позволит избежать скачка, после того как меню будет прокручено.
2. Для удобства сохраните высоту вашего меню в переменную. Например ваш оберточный контейнер имеет класс .menu-wrapper, чтобы получить его высоту в скрипте пишем $menuHeight = $(‘.menu-wrapper’).height(). Потом эту переменную пишем в условии проверки.
Спрашивайте, если что-то не понятно вам ответил, удачи!
Извините, а в каком именно месте скрипта:
$(document).ready(function(){
var $menu = $(“#menu”);
$(window).scroll(function(){
if ( $(this).scrollTop() > 100 && $menu.hasClass(“default”) ){
$menu.removeClass(“default”).addClass(“fixed”);
} else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
$menu.removeClass("fixed").addClass("default");
}
});//scroll
});
нужно прописать:
$menuHeight = $(‘.menu-wrapper’).height() и условие проверки? я новичок. Спасибо
Ловите пример: ссылка на пример фиксированного меню с оберткой 🙂
Работает, только когда меню находиться в самом верху страницы
В этой статье описан сам подход к решению поставленной задачи (один из вариантов). Нет разницы где находится меню, хоть в сайдбаре 🙂
Если у вас что-то не получилось кидайте ссылку гляну 😉
Вот посмотрите пожалуйста. Пытаюсь сделать меню которое будет сворачиваться после его прокрутки(с помощью hover так как не знаю javascript); в этом //testmenu.3dn.ru/index/menu/0-4 варианте вроде нормально, но проскакивает прокрутка, а это //testmenu.3dn.ru/index/menu2/0-6 другой вариант где указал высоту. Не знаю что сделал неправильно. Буду очень благодарен за помощь.
Если проблема в том что меню находится не в самом верху сайта, то тут просто нужно пересчитать высоту с учетом позиции меню относительно верхней границы окна браузера.
Вот как должна теперь выглядеть переменная $height.
var $wrapper = $(‘.menu-wrapper’); /* сохраним результат выборки оберточного элемента в переменную и будем работать с ним */
$height = $wrapper.height() + $wrapper.offset().top
Проблема в том, что при прокрктке до того места где должно всплыть меню, пркрутка проскакивает примерно на такое же расстояние как высота меню //testmenu.3dn.ru/index/menu/0-4
Вот код скрипта для этого варианта //testmenu.3dn.ru/index/menu2/0-6
$(document).ready(function(){ var $menu = $("#menu"), $wrapper = $(".menu-wrapper"), $height = $wrapper.height() + $wrapper.offset().top; $(window).scroll(function(){ if ( $(this).scrollTop() > $height && $menu.hasClass("default") ){ $menu.toggleClass("default fixed"); } else if($(this).scrollTop() <= $height && $menu.hasClass("fixed")) { $menu.toggleClass("fixed default"); } });//scroll });Все работает! СПАСИБО БОЛЬШОЕ!
Рад, что смог быть полезным 😉
Если у вас есть вопросы в области создания сайтов, верстке или о конкретном функционале, пишите на ящик
ask(СОБАКА)webcomplex.com.ua, на самые интересные напишу статью или видеоурок 🙂
Спасибо! Очень помогло.
Помогите пожалуйста. Нужно к вашему примеру //jsfiddle.net/nGCf3/ добавить футер который всегда прижат к низу страницы даже если контента нет
В вашем случае мы просто добавляем еще один блок – футер
<div id="footer"></div> . Прописываем для него свойства position:fixed; bottom:0
остальные свойства для футера уже на ваше усмотрение, от меня вам пример такой реализации Пример: прижатый футер
Надеюсь, что верно вас понял, если остались вопросы, пишите! Будет свободная минутка – отвечу 🙂
Народ как изменить фон фиксированного меню?
Здравствуйте, подскажите как можно сделать что бы меню сначала не было видно, а после прокрутки появлялось и при возращении снова не было видно.
Здравствуйте! Вам для меню нужно прописать display:none; а когда будет прокручена нужная часть страницы оно появится со значением fixed и будет отображено.
Вот ссылка на пример такой работы: Меню появляется при прокрутке
Помогите, пожалуйста, откорректировать вышеуказанный jQuery код. Дело в том, что у вас HTML меню находится в блоке div “header”, поэтому работает замечательно. У меня же меню идет отдельным от хедера блоком. Высота хедера – 300px (изображение.jpg). В результате меню фиксируется еще до того, как прокручена шапка сайта. Пробовал менять ваше значение 100 в файле.js на свои 300 (затем – 320). Ничего не получилось. Очевидно, в коде указывается относительно чего должно фиксироваться меню. К сожалению, с языком javascript знаком очень плохо и сам не могу разобраться…
Добрый день, Юрий!
Для вашего случая сделал пример, когда меню находится под блоком header.
В этом варианте мы в скрипте заведем переменную $limit, которая будет хранить в себе координаты нижней линии нашего меню относительно верхнего края окна браузера.
Также я завернул главное меню в еще один блок .menu-wrapper и дал ему в стилях фиксированную высоту, это сделано для того чтобы, не было скачка при переходе между состояниями нашего меню.
Вот пример вашего меню: Фиксированное меню вне хеддера
Если остались еще вопросы, пишите, постараюсь оперативно дать ответ 😉
Спасибо, большое. Все отлично работает (естественно, после прописывания в файле HTML служебных команд, а также подключения таблицы стилей и библиотеки jQuery). Кстати, нашел в этом примере еще одну новую для себя вещь. В таблице стилей вы задаете для #menu не высоту(height), а межстрочный интервал (line-height). Тем самым одновременно выставляется не только высота меню, но и текст размещается четко по центру относительно верхнего и нижнего края menu. Даже не знал, что для этого можно использовать line-height. В конечном счете не надо прописывать лишние свойства, что делает код чище.
Рад, что смог вам помочь! 🙂
Добрый день, Дмитрий! Давно хотел реализовать такую возможность на своем сайте, наткнулся на вас)Вот собственно и ссылка на страницу: //www.elit15.ru/podborclassic .Попробовал внедрить код, описанный на вашей странице туда, но ничего не работало.Не поможете?)
Нужно сделать так, чтобы при прокрутке странице 2 картинки(#topPicture #bottomPicture)
сползали вместе со страницой, но только до определенного уровня.Спасибо заранее))
Добрый день, Давид! Много писать пояснений не буду, вот ссылка на ваш пример. Надеюсь что правильно понял вашу задачу 🙂
Нижнюю границу движения думаю вы сами сможете выбрать, а в целом брал верстку с вашего сайта. Если остались вопросы, пишите!
П.С. Меня зовут Дмитрий, в вашем комменте позволил себе поправить мое имя 😉
Мерси большое за ответ!Но мне нужно было просто ограничить действие position fixed. Т.е к примеру я листаю страницу, картинка ползет со мной, и доходя до футера или до другого места останавливается. Возможно ли это вообще?
Насколько я понял вам нужно нечто подобное – пример фиксированных картинок до определенного рубежа.
П.С. Делясь моими статьями в соц сетях вы помогаете развитию блога 😉
Спасибо.Если честно я немного “туп” в javascripte, поэтому у меня остался последний вопрос))Надеюсь я вас не запарил,ДМИТРИЙ)Так вот, нужно сделать так, чтобы данный javascript включался только когда пользователь смотрит контент на устройстве, к примеру ширина которого равно 320px
Чтобы сделать выполнение скрипта при определенном размере устройства, как вариант можно весь наш код завернуть в функцию и вызывать его при условии, что ширина окна браузера менее определенного значения.
Вот к примеру такое условие if ( $(window).innerWidth() < 480 ) 🙂
А вот и сама ссылка на весь код – пример фиксированной картинки при прокрутке на мобильных устройствах
Буду рад, если смогу помочь 🙂 Пишите, если остались вопросы!
П.С. Если есть вопросы которые не касаются этой статьи можете их задать по адресу ask(СОБАКА)webcomplex.com.ua.
Спасибо большое за публикацию! Сделал меню но оказалось что в опере происходит подтормаживание прорисовки меню. Вот сайт который я делаю.
electro-kit.ru
Там пока работают только два пункта меню “О КОМПАНИИ” и “Партнеры”.
Там при переключении между этими пунктами иногда не прорисовывается выпадающая менюха сверху и надо просто мышкой поводить по верХней кромки страницы. Это только в опере. Подскажите плиз. как исправить это?
У меня тут появилась идея. Если обработать нажатия по ссылкам (якорям) с помощью скрипта и сделать переходы – плавными, то возможно не будет глючить само меню.
Сегодня-завтра сделаю пост об этом и кину вам ссылку в комментарий 🙂
Спасибо! Буду ждать 🙂
Надеюсь ждали не долго ))
Вот ссылка на пост в котором я делаю плавный переход после нажатия по якорным ссылкам:
Плавный скролл после нажатия на якорную ссылку
Попробуйте реализовать у себя на сайте такой переход и тогда, возможно, баг в Опере не произойдет.
Если не поможет, пишите – будем думать 🙂
Спасибо помогло 🙂
Подскажите, пожалуйста, как решить проблему с тем, что пункты меню дергаются при наведении на них курсора мыши.
Сайт nagimot.ru
Здравствуйте, Денис!
В вашем случае пункты меню скачут при наведении из-за разной жирности шрифта у ссылки.
В нормальном состоянии у ссылки свойство font-weight:800, а у состояния a:hover { font-weight:700 }, скачет ваше меню.
Еще заметил на главной при прокрутке главное меню не может изменить свое состояние (на экране 1920*1024 пискселов), вам нужно добавить оберточный див и задать ему высоту главного меню, тогда не будет скачка при смене состояния на фиксированное.
Вот ссылка на ваш пример: Правки главного меню.
Спрашивайте, если остались вопросы! 🙂
Здравствуйте.
Разрабатываю шаблон, помогите “прикрутить” этот меню к моему шаблону.
В долгу не останусь!
Добрый день, Виталий!
Скидывайте архив с шаблоном мне на почту, как появится минутка, постараюсь помочь 😉
Почта: ask СОБАЧКА webcomplex.com.ua
Здравствуйте , большое спасибо за предельно ясное объяснение!
Подскажите , а как сделать , чтобы меню появлялось через определенное количество пикселей прокрутки?
Здравствуйте, Дмитрий!
Вот та часть скрипта которая меняет состояние нашего меню на фиксированное:
$(window).scroll(function(){ if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){ $menu.removeClass("default").addClass("fixed"); } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) { $menu.removeClass("fixed").addClass("default"); } });Число 100 в этом условии: $(this).scrollTop() > 100 означает, что состояние будет переключено после прокрутки на 100 пикселов.
Вы же можете изменить это значение на свое, либо использовать в качестве значение высоту хеддера (например):
var limit = $('#header').height(); $(window).scroll(function(){ if ( $(this).scrollTop() > limit && $menu.hasClass("default") ){ $menu.removeClass("default").addClass("fixed"); } else if($(this).scrollTop() <= limit && $menu.hasClass("fixed")) { $menu.removeClass("fixed").addClass("default"); } });Таким образом мы вынесли в переменную limit значение при котором срабатывает переключение состояния меню.
Вы знаете Дмитрий, изменение этих цифровых параметров никак не повлияло на отображении меню. Меню становиться якорным все также на 100px.
Киньте ссылку на сайт или выложите ваш код на jsfiddle.net 🙂
Спасибо большое , разобрался)
После добавления фиксированного меню, с прокруткой до определенного момента, перестало работать слайд шоу, пишет вот что
Uncaught TypeError: Cannot read property ‘top’ of nullindex.php?route=common/home:200
(anonymous function)jquery-1.7.1.min.js:2 njquery-1.7.1.min.js:2 o.fireWithjquery-1.7.1.min.js:2 e.extend.readyjquery-1.7.1.min.js:2 c.addEventListener.B
Кидайте ссылку на сайт или выложите код на jsfiddle.net
//diamonddreams.ru/
сайт слайд шоу на главной больше не работает, а вот если зайти в категорию, там будет фильтр, который работает
Посмотрел код скрипта у вас там опечатка, т.к. у вашего меню id=”menu”, а скриптом вы пытаетесь найти несуществующий блок и взять у него параметр .top 🙂
Это нужно исправить var $menuu = $(“#menuu”) на это $menu = $(“#menu”) и далее по коду использовать переменную $menu.
Внесите правки и отпишите если помогло!
наверно я не правильно выразился, var $menuu = $(«#menuu») – это я так назвал фильтр, который находится вот тут //diamonddreams.ru/index.php?route=product/category&path=165 слева. Он работает, но не работает слайд шоу, которое находится на главной странице.
Вот теперь я вас понял ))
На главной странице код говорит мол нету на этой странице такого блока как $(“#menuu”)!
Чтобы все работало заверните ваш код в условие
if ( $("#menuu").length ) { //you code here }Таким образом мы проверим наличие бока фильтров на странице и если он есть будет выполнять наш код 😉
//jsfiddle.net/gloovan/2nbs68ov/1/
и вот код
Подключил библиотеку и все отлично работает
//jsfiddle.net/2nbs68ov/2/
а в вашем магазине просто опечатка, поправьте и все будет ОК
Огромнейшее спасибо, а то я весь мозг себе выел. Пробовал сделать так же, точнее подобное, только не правильно. Спасибо!
а можно это меню как то прикрутить к joomle 2.5 ?
Да, можно вам, просто стоит внести правки в ваш файл стилей и скриптов… и если нужно то поправить структуру самого меню.
Либо кидайте ссылку на сайт, как будет время – помогу 😉
Здравствуйте. Спасибо за ваш труд, все очень хорошо и понятно написано.
Скажите, а вы еще планируете написать про “сделать расширение основного контента при исчезновении из вида боковой колонки (как ВКонтакте)”? Очень интересная тема.
У меня еще есть вопрос. А как можно модифицировать ваш код, чтобы фиксированное вверху меню появлялось при прокрутке страницы вверх? А, если прокрутка останавливается пользователем (не дойдя до верха страницы), то меню опять исчезало бы в течение пары секунд?
Просто на смартфонах полоса фиксированного меню сверху выглядит лишней, потому что съедает пространство, но с точки зрения юзабилити хорошо, когда к меню есть максимально быстрый доступ.
Заранее спасибо.
Здравствуйте, Наталия!
Постараюсь на следующих выходных написать код для отображения меню при прокрутки.
Что касается варианта как в ВК, не совсем понял о чем вы (я не редко на ВК), могу сделать пример мобильного меню которое выезжает слева и собой отодвигает основной контент сайта 🙂
Дмитрий, про вариант как в ВК – я просто процитировала ваши слова в конце статьи )) Считаю, что это грамотное использование пространства, когда основной контент расширяется на всю страницу при исчезновении из вида боковой колонки (сайдбара).
Про код для меню при прокрутке – спасибо огромное, буду ждать с нетерпением ))
Доброго времени суток!
У меня такая проблема, помогите разобраться.
В локальной версии сайта все работает без нареканий – заливаю на хостинг и скрипт крашится…
Валидатор жалуется:
Line 51, Column 44: character “&” is the first character of a delimiter but occurred as data
if ( $(this).scrollTop() > 100 && $menu.hasClass(“default”) ){
This message may appear in several cases:
You tried to include the “<" character in your page: you should escape it as "<"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
Как исправить?
Ругается на все амперсанды и на символ “меньше” <
Line 53, Column 43: character "<" is the first character of a delimiter but occurred as data
} else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
This message may appear in several cases:
You tried to include the "<" character in your page: you should escape it as "<"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
Добрый день, а есть ссылка где это можно посмотреть?
Чувствую себя Флудлом (извините)… //jsfiddle.net/Swaaarm/7uv9oftm/
И что здесь не так? 🙂
(подключил библиотеку jQuery и все работает //jsfiddle.net/webcomplex/7uv9oftm/1/)
Вот что странно… в локальной версии все работает,а хостинге нет. прям беда какая-то. Это у меня не первый раз такое. Не помню как решил тот вопрос, кажется скрипт какой то убрал и все заработало. в этот раз перепробовал все скрипты убрать по очереди. Остался только этот и все равно все так же(
Добрый день, Дмитрий.
Делал меню по вашему примеру, но есть проблема, при наведении курсора мыши на пункт меню, буквы пляшут, выглядит не очень красиво. Пытался исправить сам, но не нашел нигде как это сделать. Может все дело в том, что у меня не joomla, а opencart? Хотя не думаю, что проблема в этом. Если у Вас есть время и желание, не могли бы Вы посмотреть профессиональным взглядом и ткнуть меня носом в ошибку.
Заранее спасибо.
Добрый день, Денис!
вот поправил ваш код
//jsfiddle.net/webcomplex/9d4wyzjs/
Огромное Вам спасибо.
Добрый день, вопрос, есть шаблон сайта с фиксированным меню и заменой цвета меню при прокрутке. вот только цвета при прокрутке в опере и хроме раньше времени меняется (в фаерфоксе все ок. вот сайт //bolshoi-medved.ru/, может есть опыт исправления??? стили?
Добрый день, Сергей!
Цвета при прокрутке не совпадают, скорее всего из-за того, что скрипт обрабатывает позицию блоков до того как загрузятся картинки.
Вам нужно попробовать сделать выполнение скрипта на событие load() а не ready(), если ошибка останется, то воспользуйтесь скриптом который отслеживает полную загрузку картинок, о нем я писал в одном из постов jQuery выполнения кода после полной загрузки изображений
спасибо за участие, вопрос решил прописыванием размеров изображений в html, т.к jquery.waitforimages.js не помог
Странно, что скрипт не помог, но рад что решение было вами найдено 🙂
Спасибо большое за дельное меню все получилось только с небольшим отклонением..
при пролистывании меню как бы скрывается частично за основной контент: фото прилагаю
ничего не могу понять (ибо причина что новенький видно я))
//firepic.org/images/2015-02/24/1bmkepfqkyw2.png
Буду признателен за подсказку.
Двигатель DLE
взял пример меню из комментариев где вы давали ссылку на меню с логотипом и меняющимся при прокрутке на контакты: //jsfiddle.net/nGCf3/
И еще как убрать прозрачность меню – имею ввиду то что буквы текста новостей и тд.видны а меню как бы прозрачное пока на него не наведешь курсор можно ли сделать чтобы был однотонный?))
Добрый день, Виталий!
Проблема с перекрытием основным контентом, скорее всего возникает из-за положения меню по оси Z.
В фиксированном состоянии свойство z-index (для меню) должно быть больше чем у основного контента, например: z-index: 999;
В основном было бы легче вам подсказать если бы вы вынесли часть вашего кода на jsfiddle 🙂
А какая часть нужна? CSS или самом шаблоне HTML или js..может проще будет мне скинуть на почту вам файл CSS?
Только я не знаю ее
Нужна часть HTML, CSS и JS. 🙂
Лучше все это подключить на jsFiddle, но можно и на почту ask@webcomplex.com.ua
//jsfiddle.net/19f8sprx/
но дополнительно отправил вам на почту потому что: парадокс такой на jsFiddle работает а как вставляю его в основной HTML лезет под контент))
Посмотрел ваш код, попробуйте в стилях для #brookmenu.fixed добавить z-index: 999;
И отпишите помогло или нет 🙂
Нет, к сожалению все по прежнему((((
Если не сложно то посмотрите почему перестает плавать корзина ( //prntscr.com/6f5zrs ) после нажатия на кнопку “Добавить в Корзину”. Уже неделю не могу решить проблему. Три программиста не могли исправить. Так все работает как нужно, нажимаеш “В корзину” и перестает плавать
Тут нужно смотреть в скрипт, скорее всего что после ответа на аякс запрос, верстка блока корзины полностью обновляется и скрипт уже не видит того DOM элемента на который было повешено событие fixed при скроле.
Завтра постараюсь посмотреть что там у вас со скриптами 🙂
Доброго времени суток. Спасибо огромное за статью. В скриптах пока новичок. Решил сделать ваш пример, однако при прокрутке ничего не происходит. Сделал 3 файла с расширениями – .html, .css, .js. CSS – работает, а вот js ну никак( Не подскажите, что исправить?
//jsfiddle.net/fmawwcL2/
У Вас в скрипте if ( $(this).scrollTop() > $header.height() && $menu.hasClass(“default”). Переменная $header не определена.
Не подскажете как сделать выпадающие подпункты в меню при наведении?
Подскажите пожалуйста как сделать всё тоже самое, но чтобы меню прятолось при прокрутке вниз, а при обратном скролинге вверх появлялось.
Здравствуйте! Использовала ваш код (внутри оберточного блока двух элементов (например: логотип и контакты), один из которых изначально будет скрыт). Очень здорово получилось! Но вот, чтобы плавно скролило, никак не выходит. Ваш код с плавным скролом применяю, тогда вообще якорные ссылки не работают. Подскажите, пожалуйста, как реализовать такое меню. Заранее спасибо. Здоровский сайт!
Здравствуйте, закиньте ваш код на //jsfiddle.net чтобы я мог посмотреть, так сложно что-то сказать, буду ждать 🙂
Спасибо за комментарий!
Я тут на красной кнопке мин на 20 залип точно =)
На то и расчет 😉
Здравствуйте, прокрутку сделал, меню сделал, а выставить по центру не получается помогите, плиз.:zelenagamma.mdr.com.ua/ как-то так, в css очень плохо разбираюсь(
а здесь Ваш пример… //test.mdr.com.ua/
Добрый день!
Прочитал вашу статью ибо уже измучился с этим плавающем меню.
Сайт делаю на bootstrap и вот проблему не могу решить уже 3-й день с плавающем меню.
Все уже перепробывал. Но меню как вкопаное не хочет закрепляться.
Пожалуйста посмотрите вот по этой ссылке //fs24.com.ua/mobil/
В самом boostrape пишут что этот вопрос решается самим boostrap, но у меня ничего пока не получилось.
Если код надо выслать я вышлю.
Еще на вашем сайте на одном посте я оставлял вопрос по поводу ‘плавного перехода”- заработало уже.
Здравствуйте, заметил что вы не подключили библиотеку jQuery к вашему проекту, по-этому скрипт и не работает у вас на сайте.
Подключите библиотеку и отпишитесь, я посмотрю код 🙂
ссылка на сайт jQuery – //jquery.com
Подскажите пожалуйста. Делаю меню для перехода по закладкам на одной странице, и вот при переходе с одного пункта на другой часть открывающего пункта скрывается под меню, как это можно исправить?
если дизайн позволяет, то просто добавьте внутренний отступ сверху, на высоту меню, для каждого “открывающегося пункта”
а если дизайн такого не позволяет, то пишите, нужно будет скриптом править 🙂
Спасибо большое!
Пожалуйста
А как сделать выпадающий список для данного типа меню? Подскажите пожалуйста очень нужно.
а какой у вас движок и какое меню вам нужно?
у меня есть пара статей о многоуровневом меню
//webcomplex.com.ua/?s=%D0%BC%D0%B5%D0%BD%D1%8E
Сайт без движка, меню такого типа как этот.
статьи в прошлом комментарии не помогли?
Помогли, но получилось не очень красиво. Буду работать, спасибо за данный сайт))
Вы также можете выложить ваш пример на jsfiddle.net и тогда мы можем поговорить более предметно 🙂
Добрый день, у нас сайт на cs-cart, подскажите как правильно реализовать такое меню на этом движке?
Нужно перепрописать стили для главного меню и добавить скрипт для обработки события прокрутки страницы.
здравствуйте, при создании сайта столкнулся с такой проблемой, при прокрутке страницы вниз появился промежуток между блоком и верхней границей страницы, как сделать так чтобы при прокрутке вниз блок был вплотную к верхней границе страницы, т.е. чтобы блок прилипал к верху страницы вплотную как на этом сайте //lipsenhancer.ru/wowlips/ , вот то что я начал делать //testlpgenerator.ru/stranitsa-226867/, очень нужна ваша помощь
Здравствуйте. Дело в том, что ваш блок изначально имеет фиксированную позицию и отступ сверху от страницы в 75 пикселов. Посмотрите код моей статьи, он вам поможет. Меню нужно реализовать, так чтобы оно изначально было под хеддером и только при прокрутке мы скриптом меняем ему класс с фиксированной позицией.
Дмитрий , спасибо за Ваш ответ, тут вот какая ситуация: красный блок для статичного меню расположен перед тегом body, вот его код
jq_144(function($) {
$(document).ready(function() {
var sm_bg_block = “#block-new9”; //идентификатор основной панели меню
var sm_gap = 75; //сдвиг меню (в пикселях) от верней границы окна
var sm_shift = 0; //сдвиг меню (в пикселях) по горизонтали относительно центра экрана
/* Для корректной работы menu дальнейший код изменять не рекомендуется */
var sm_menu = “”;
var sm_x_crd = [];
var sm_y_crd = [];
var sm_bg_top, sm_bg_left, sm_bg_bot, sm_bg_right, sm_bg_zi;
var sm_i = 0;
var sm_x = 0;
var sm_y = 0;
var sm_bg_w = 0;
sm_bg_zi = parseInt($(sm_bg_block).css(“z-Index”));
sm_bg_top = parseInt($(sm_bg_block).css(‘top’));
sm_bg_left = parseInt($(sm_bg_block).css(‘left’));
sm_bg_right = sm_bg_left + $(sm_bg_block).width();
sm_bg_bottom = sm_bg_top + $(sm_bg_block).height();
$(‘div’).each(function()
{
if (
(sm_bg_zi<parseInt($(this).css("z-Index"))) &&
(sm_bg_top<parseInt($(this).css('top'))) &&
(sm_bg_left(parseInt($(this).css(‘left’))+$(this).width()) &&
(sm_bg_bottom>(parseInt($(this).css(‘top’))+$(this).height())))
)
{
sm_menu += (“#”+$(this).attr(‘id’)+”, “);
}
});
sm_menu = sm_menu.substring(0, sm_menu.length-2);
$(sm_bg_block).css(‘position’,’fixed’);
$(sm_bg_block).css(‘z-index’,parseInt($(sm_bg_block).css(‘z-index’))+500);
$(‘body’).append($(sm_bg_block));
$(sm_menu).each(function()
{
$(this).css(‘position’,’fixed’);
$(this).css(‘z-index’,parseInt($(this).css(‘z-index’))+500);
$(‘body’).append($(this));
});
sm_bg_top = $(sm_bg_block).position().top;
sm_bg_left = $(sm_bg_block).position().left;
$(sm_menu).each(function()
{
sm_x_crd[sm_i] = $(this).position().left – sm_bg_left;
sm_y_crd[sm_i] = $(this).position().top – sm_bg_top;
sm_i++;
});
sm_bg_w = $(sm_bg_block).width();
sm_y = sm_gap;
sm_i = 0;
$(sm_menu).each(function()
{
$(this).css(‘top’, sm_y + sm_y_crd[sm_i]);
sm_i++;
});
$(sm_bg_block).css(‘top’,sm_y);
$(window).resize(function()
{
sm_i = 0;
sm_x = ($(window).width() – sm_bg_w)/2 + sm_shift;
$(sm_bg_block).css(‘left’,sm_x);
$(sm_menu).each(function()
{
$(this).css(‘left’, sm_x + sm_x_crd[sm_i]);
sm_i++;
});
});
$(window).resize();
});
});
$(document).ready(function(){
var $menu = $(“#menu”);
$(window).scroll(function(){
if ( $(this).scrollTop() > 100 && $menu.hasClass(“default”) ){
$menu.removeClass(“default”).addClass(“fixed”);
} else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
$menu.removeClass("fixed").addClass("default");
}
});//scroll
});
Как я вас понимаю, нужен еще один код с Вашей статьи и следует добавить его после тега body, и тогда при прокручивании страницы вниз блок будет вплотную прилегать (смещаться) к верхней границе страницы, поправьте пожалуйста, если я ошибаюсь, просто я новичок в этом деле, надеюсь на Вашу помощь.
К сожалению вы работаете через конструктор, возможно у них есть тех поддержка, которая вам поможет. Я с ним не знаком и дать больше чем есть в статье не смогу по поводу кода и что куда вставлять 🙁
сразу скажу , что советуют использовать команду gap, так вот она никак не влияет на прилипание статичного меню к верхней границе страницы при прокрутке её
вниз
Тут я не совсем понял о чем идет речь ) Данное меню реализуется с помощью обычного CSS и jQuery, посмотрите код в статье.
Подскажите пожалуйста, я не совсем понял куда что добавлять, что мне нужно сделать?
Красная кнопка это нечто) Это сколько времени надо было на нее убить-то?)
Но оно того стоило х)
Спасибо, развеселило 🙂
Помогите! После скролинга меню становится во весь экран и содержимое меню прилепает к левому краю как мне его поставить по центру! вот сайт //zpm36.ru/test/index.html
Посмотрел ваш сайт (в хроме), все там хорошо 🙂
Уже разобрались или еще нужна помощь?
Добрый день.
Подскажите, разобрался с кодом, но дело в том что на сайте адаптивная верстка. И если браузер не на весь экран то именно строка с меню когда фиксируется не адаптируется к новым размерам.
В коде
#menu.default {
02
width:auto;
03
}
04
#menu.fixed {
05
position:fixed;
06
top:0; left:0;
07
width:100%; (указывал здесь auto) тогда при фиксации строка идет на пол экрана по левому краю
08
}
Буду благодарен за помощь
Добрый день!
Меню занимает все доступное ему пространство, возможно вы прописали размеры для пунктов меню и поэтому оно не адаптируется.
Желательно дать мне ссылку на весь пример, залейте его сюда //jsfiddle.net
Дмитрий привет! А не подскажешь мне тоже нужно сделать так как, в комментариях здесь нашел на сайте electro-kit.ru/, чтобы меню прижималось вверху и логотип на моем сайте //promimpexpro.ru, заранее спасибо)
Здравствуйте, а чем не подходит тот пример? 🙂
Дык я не пойму как сделать чтобы при скролинге и логотип вписывался в меню как здесь electro-kit.ru
Так я не нашел там кода как это сделано Дмитрий, тоже пока не очень в яве разбираюсь. На моем сайте меню закрепляется вверху вот так:
jQuery(window).on(“load”, function() {
if(jQuery(“#yt_menuwrap”)){
offset_top = jQuery(“#yt_menuwrap”).offset().top
processScroll(“#yt_menuwrap”, “menu-fixed”, offset_top);
jQuery(window).scroll(function(){
processScroll(“#yt_menuwrap”, “menu-fixed”, offset_top);
});
}
});, я хотел попробовать ваше, но не пойму какие значения куда вставлять и как сюда еще логотип в меню при скроле добавить)
Все перепробовал! В этом деле не силен! Сделал по инструкции. Меню есть. Но оно не фиксируется при прокрутке страницы. Помогите разобраться 🙂 Что не так сделал? //test-promo.at.ua/index/8-5
Добрый день. Огромная благодарность за статью и исходник, все заработало сразу, хоть и занимаюсь раз в год.
Есть вопрос – как доработать код, чтобы некоторые пункты меню (напр.- первый и последний) появлялись бы только после скроллинга, а до прокрутки их бы не было бы видно? Еще раз спасибо.
Здравствуйте.
Вот пример такого кода: //jsfiddle.net/webcomplex/9h9ns/13/
Дмитрий, спасибо за пример кода, очень выручили. Есть еще вопрос – на странице уже есть скрипт на jquery – для увеличения фото (fancybox) с собственной папкой с библиотекой и файлами. При попытке прописать на страницу код фиксированного меню происходит некий “конфликт скриптов” – перестает работать fancybox – фото открываются в отдельном окне. Убираю со страницы ссылку на библиотеки от фиксированного меню – fancybox работает, а меню после обратного скроллинга “залипает” в расширенном состоянии и не возвращается на свое место на странице. В чем может быть дело, не подскажете? Заранее спасибо.
Здравствуйте, к сожалению не подскажу, т.к. тому что Вы описали может быть масса причин. Но скорее всего просто ошибка в скрипте, откройте консоль в браузере и посмотрите что в ней пишут по этому поводу или дайте ссылку на сайт я посмотрю )
Добрый день. Вот тестовая страница сайта, на которой я пробую вставить фиксированное меню: //stolarka.pro/main_pages/gallery_3.htm
Если не кликать по фото – все работает хорошо. Но стоит кликнуть по третьей картинке (“Дверь с витражом”) – меню перестает работать. Может быть это из-за того, что у каждого скрипта прописан путь к своей собственной библиотеке?
Добрый день, а как в этом скрипте зафиксировать еще и #topbar?
Добрый день. Почитайте статью //webcomplex.com.ua/html/delaem-knopku-naverx-dlya-sajta.html
Здравствуйте! Нужна помощь по дизайну главной страницы сайта. Применить скрипт для меню и категорий.Не даром! Если есть желание и время помогите!
Ответил Вам на почту 🙂
Здравствуйте, сделал по вашему примеру появление лого слева. Вопрос в следующем как сделать чтобы при прокрутке лого появлялось слева и одновременно появлялись контакты справа как здесь //kc-spb.ru/
Моя работа здесь pk.pet-snab.ru
К сожалению, сейчас совсем нет времени на доработку подобных моментов. Если и отвечу то очень не скоро, увы …
Спасибо. Буду ждать.
Что за красная кнопка?! 😀
Добрый день!
В js вообще ничего не понимаю, поэтому действовала четко по инструкции )) Только все равно ничего не получается. Создала стиль, файлик js с вот таким кодом:
$(document).ready(function(){
var $menu = $(“#menu”);
$(window).scroll(function(){
if ( $(this).scrollTop() > $header.height(); && $menu.hasClass(“default”) ){
$menu.removeClass(“default”).addClass(“fixed”);
} else if($(this).scrollTop() <script type="text/javascript" src="/js/responsive-nav.min.js”>
)
Только все равно ничего не работает. Перепробовала кучу вариантов и ничего. В чем мой косяк? 🙂
Не хочется обращаться к программистам, хочется все своими “золотыми” руками сделать.
Мне бы посмотреть на ваш код, может есть доступ к нему в сети?
А может давайте я вам на почту кину информацию?
Отбой помощи, кажется разобралась 🙂
Здравствуйте, Дмитрий.
Как не крутил код, к каким только div’ам не цеплялся-результата вообще никакого. Может подскажете, что он хочет?
Здравствуйте, Виталий!
Может и подскажу, но мне нужно посмотреть на страницу с вашим кодом, ссылку в студию 🙂
Адрес указывал, думал он будет виден. 🙂
//test.san-marco.in.ua/
Здравствуйте!
Заранее извиняюсь, если уже этот вопрос был, все комменты не осилил, поиск ничего не дал. Сделал сайт на Вордпресс, на основе уже готовой темы. В этой теме меню уже прилипает вверху экрана при прокрутке, но мне это только мешает и нужно это убрать. Подскажите, пожалуйста, как можно запретить это прилипание меню при прокрутке, чтобы оно прокручивалось вместе со страницей? Тема для ВП: “i-excel”
Правильно будет найти в файле скриптов ту часть которая переключает состояние меню и удалить ее.
Или просто удалить стили для фиксированного состояния меню .fixeddiv
Подскажите, пожалуйста, что я должен заменить в вашем скрипте, чтобы адаптировать его под шаблон jv_chao?
$(document).ready(function(){
var $menu = $(“#jv-mainmenu”);
$(window).scroll(function(){
if ( $(this).scrollTop() > $header.height(); && $menu.hasClass(“default”) ){
$menu.removeClass(“default”).addClass(“fixed”);
} else if($(this).scrollTop() <= $header.height(); && $menu.hasClass("fixed")) {
$menu.removeClass("fixed").addClass("default");
}
});//scroll
});
так должно быть?
Здравствуйте господа. Есть вопрос…и по ходу поисков в интернете судьбинушка привела к вам. В яве ничерта не понимаю, но походу ваша тема и пример вышеописанного меню совпадает с моим вопросом.
Собственно вопрос:
Имеется интернет магазин kofe78.ru у этого сайта меню точь в точь как мне надо (без дизайна ес-но)
Стоит все это дело на opencart.
И прикручивать мне нужно тоже в opencart.
Если есть возможность показать как это осуществляется буду безмерно благодарен. Хотя бы топорно…
На сколько я понял там одно меню имеет позицию fixed которое горизонтальное. А как вот сделать чтоб из него еще одно выползало.
На странице ошибка Uncaught TypeError: Cannot read property ‘length’ of undefined из-за этого не видно ошибки
Здравствуйте. Подскажите, как задать отступ снизу в этом скрипте: var $ = jQuery.noConflict();var h_hght=100;var h_mrg=0;jQuery(function(){jQuery(window).scroll(function(){var top=jQuery(this).scrollTop();var elem=jQuery(‘#top-menu’);if(top+h_mrg<h_hght){elem.css('top',(h_hght-top));elem.removeClass('fix')}else{elem.css('top',h_mrg);elem.addClass('fix')}})});
Через этот скрипт у меня на сайте реализовано плавающее меню. И оно наползает на заголовки, если к ним перебрасывает с меню статьи. Я так поняла, что это отступ сверху var h_mrg=0; А как задается отступ снизу?
Добрый день
А не подскажите как сделать фиксированное меню сбоку, а не сверху?
На сайте уже есть фиксированное меню сверху. Мне нужно сделать еще одно дополнительное меню, которое будет двигаться с верхнем при прокрутки страницы.
вот код меню которое установлено на сайте //jsfiddle.net/v7ep2cm3/4/ Только странно по это ссылке оно отображается как надо, но не работает. На сайте всё норм.
Сможете помочь? Пока сам посижу поковыряюсь, чтобы не ждать.
Добрый день.
Для создания фиксированного сайдбара, вам лучше воспользоваться плагином //leafo.net/sticky-kit/