Сейчас: 10:14:10   29-го марта 2024 г.
UsefulScript.ruСкриптыСложные менюПриклеивающееся меню
155
399

Приклеивающееся или прилипающее меню

Если Вам необходимо, чтобы меню сайта при прокрутке пользователем странички вниз постоянно оставалось вверху окна в зоне видимости, то можем порекомендовать Вам воспользоваться нашим скриптом на jQuery для реализации приклеивающееся к верху окна меню.


Наглядно посмотреть работу предлагаемого скрипта приклеивающегося меню Вы можете чуть ниже. Для этого прокрутите страничку немного вниз, и Вы увидите, как пример меню "прилипнет" к верхнему краю окна и будет оставаться там (в зоне видимости). При прокрутке странички вверх (выше изначального места расположения меню), меню займет свое первоначальное положение.




Хотим отметить, что вместо меню можно "приклеивать" к верхнему краю окна любой другой элемент странички (изображение, баннер или ссылку).


Итак, перейдем к реализации данного скрипта на своем собственном сайте. Для этого Вам потребуется подключить библиотеку jQuery. Делается это так:

JavaScript код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

Далее необходимо добавить на сайт стиль для элемента, который будет применен для приклеивания данного элемента к верхнему краю окна. В нашем случае приклеиваться будет блок DIV, в который мы поместили таблицу со ссылками:

HTML код:
<style type="text/css">
    .
to_top positionfixedtop0px; }
    
#stick_menu { width: 600px; margin:0 0 0 50px; height: 25px; }
    #stick_menu > table { width: 600px; margin: 0 auto; }
    #stick_menu > table td { width: 25%; text-align: center; font-size: 18px; }
</style>

Далее в нужное место добавляете элемент, который будет прилипать к верхнему краю окна. Пусть это будет блок DIV с id="stick_menu", внутри которого располагается таблица:

HTML код:
<div id="stick_menu">
 <
table>
  <
tr>
    <
td><a href="news.php">Новости</a></td>
    <
td><a href="script.php">Скрипты</a></td>
    <
td><a href="useful_site.php">Онлайн-сервисы</a></td>
    <
td><a href="trick.php">Хитрости</a></td>
  </
tr>
 </
table>
</
div>

Теперь остается только добавить jQuery скрипт, который будет "приклеивать" и "отклеивать" наш блок DIV с id="stick_menu" в зависимости от того, на сколько прокручена страничка:

JavaScript код:
<script type="text/javascript">
$(
document).ready(function() {
var 
start_pos = $("#stick_menu").offset().top;
 $(
window).scroll(function(){
  if ($(
window).scrollTop()>=start_pos) {
    if ($(
"#stick_menu").hasClass()==false) $("#stick_menu").addClass("to_top");
  }
  else $(
"#stick_menu").removeClass("to_top");
 });
});
</script>

Таким образом, воспользовавшись нашим скриптом приклеивающегося меню, Вы сможете зафиксировать в зоне видимости необходимые Вам элементы (изображения, меню и т.д.) при прокрутке странички пользователем вниз.

Дата создания: 16:08:43 15.12.2013 г.
Дата обновления: 21:55:23 15.10.2015 г.
Посещений: 38397 раз(а).

Комментарии посетителей (38 шт.):
Илья
4
# 1492
(18:07:39  23.02.2014 г.)

Я рано обрадовался почему другие элементы перестали нажиматься кроме этого меню.
Ответить

Administrator
7
# 1493
(19:25:59  23.02.2014 г.)

Возможно, у Вас конфликт библиотеки jQuery с какой-либо другой уже имеющейся на сайте. Сам скрипт не обрабатывает и не перехватывает клики, он только добавляет и удаляет стиль.
Ответить

Илья
1
# 1494
(19:55:13  23.02.2014 г.)

Я нашел вот такой код он работает и все нажимается, вот только стили не все вместе с меню перемещаются. Если можно как то добавить стили вот код:
$(function() {
var box = $('#messagelist'); // float-fixed block

var top = box.offset().top - parseFloat(box.css('marginTop').replace(/auto/, 0));
$(window).scroll(function(){
var windowpos = $(window).scrollTop();
if(windowpos < top) {
box.css('position', 'static');
} else {
box.css('position', 'fixed');
box.css('top', 0);
}
});
});
Стили перемещаются если сделать, чтоб меню было поверх всего, а как это сделать я не знаю.
Ответить

Vlad
3
# 1672
(17:55:15  20.05.2014 г.)

Скрипт интересный. На Вашем сайте работает как у Вас и описано, а у меня не хочет. Может что-то Вы упустили и надо еще что-нибудь добавить?
Ответить

Administrator
1
# 1673
(20:10:50  20.05.2014 г.)

Библиотеку jQuery подключали? Попробуйте скопировать скрипт на пустую страничку и проверить его работу, а уже потом внедряйте на сайт.
Ответить

Vlad
1
# 1675
(13:35:07  21.05.2014 г.)

Вот практически пустая страничка с Вашим скриптом. Только добавил внизу две одинаковые картинки, чтобы страничка была длиннее для прокрутки и проверки. Не работает.
Ответить

Administrator
0
# 1676
(20:40:27  21.05.2014 г.)

У меня Ваш код отлично работает даже в IE. Скиньте ссылку на страничку сайта, посмотрю, что не так.
Ответить

Vlad
0
# 1678
(11:00:29  22.05.2014 г.)

Неужели трудно было написать, что скрипт работает только через сервер? Загрузил страничку на сервер, и через сервер все работает. А просто на компе запускаю - не хочет, хотя другие скрипты работают. Может это касается именно скриптов на jQuery?
Ответить

Administrator
0
# 1680
(14:07:04  22.05.2014 г.)

Данный скрипт работает и на локальном компьютере при условии наличия Интернета, т.к. библиотеку jQuery мы подгружаем с серверов Google.
Ответить

Vlad
0
# 1681
(18:16:23  22.05.2014 г.)

Я понимаю, что библиотека подгружается. Интернет у меня есть и нормально работает, но почему не хочет с локального не понятно. Ну да ладно, бог с ним. Спасибо и за это. Но если я Вам не надоел, еще один вопрос. У меня меню растянуто на всю ширину экрана, т.е. на 100%. Так вот, когда оно прилипает к верху страницы, оно сжимается по горизонтали до суммарной ширины заголовков меню, т.е. в моем случае почти в 2 раза. Когда отлипает, ширина восстанавливается. Смотрится это не очень. Можно ли это как-то исправить?
Ответить

Administrator
0
# 1682
(22:15:34  22.05.2014 г.)

Пропишите для меню изначально CSS стиль style="width:100%;"
Ответить

fawor
0
# 1851
(12:57:36  01.09.2014 г.)

Как сделать что бы меню было поверх всего? У меня оно теряется под всем остальным содержимым на сайте.
Ответить

Administrator
1
# 1852
(14:37:14  01.09.2014 г.)

Добавьте в стиль меню "z-index: 999;". Значение не обязательно должно быть 999, но должно быть больше чем у других элементов.
Ответить

sera
1
# 2059
(19:44:08  25.11.2014 г.)

Достойно описано спасибо, плохо только что не описана полная реализация, а именно куда именно в какой файл пихать эти коды.
Ответить

Administrator
0
# 2060
(19:51:54  25.11.2014 г.)

Так это зависит от движка Вашего сайта.
Ответить

Константин
0
# 2121
(18:09:50  11.12.2014 г.)

Напишите пожалуйста стиль, который у вас используется для примера, только красным цветом. Очень надо. У вас отличный сайт!
Ответить

Administrator
0
# 2122
(19:49:04  11.12.2014 г.)

Стиль можно посмотреть в исходном коде странички:
<div id="stick_menu" style="width: 600px; margin:0 0 0 50px; height: 25px;">
<table style="width: 600px; margin: 0 auto; padding: 4px; border-radius: 7px; border: 1px solid #FFFF00; background-color: #CCFFFF; box-shadow: 2px 2px 3px #666666, inset 0 0 12px 6px #0000FF;">
Про красный цвет не понял, что именно нужно, но думаю, Вы и сами справитесь.
Ответить

Артём
0
# 2126
(09:24:11  13.12.2014 г.)

Здравствуйте! На странице сделана навигация, ссылки вида: http://mysite.ru/link1#mmm, http://mysite.ru/link2#nnn и так далее.
Когда нажимаю на любую из ссылок, идёт перемещение внутри страницы.
После перемещения, прилипающее меню наезжает на name ссылку. Чем больше задаю высоту прилипающего меню, тем больше наезжает меню на ссылающийся контент. Помогите разобраться, сделать так чтобы скролл останавливался в нужном месте и залипающее меню не наезжало на текст.
Ответить

Administrator
0
# 2127
(14:52:26  13.12.2014 г.)

Если у Вас скролл организован стандартным HTML (без использования JavaScript), то тут два варианта:
1) Переместить выше якорь на страничке.
2) Заменить JavaScript код на такой:
$(document).ready(function() {
$('a[href*=#]').bind("click", function(e){
var str=$(this).attr('href').split('#');
$('html, body').stop().animate({ scrollTop: $('#'+str[1]).offset().top-100 }, 1000);
e.preventDefault();
});

var start_pos=$('#stick_menu').offset().top;
$(window).scroll(function(){
if ($(window).scrollTop()>=start_pos) {
if ($('#stick_menu').hasClass()==false) $('#stick_menu').addClass('to_top');
}
else $('#stick_menu').removeClass('to_top');
});
});
Другой Ваш вопрос перенес на форум - Ссылка на конкретный "Заголовок, материал" на странице без "#".
Ответить

Григорий
0
# 2767
(18:39:42  15.10.2015 г.)

Здравствуйте! Спасибо за скрипт. Но есть один момент, он делает отступ в 100px т.е. если повторно нажать на ссылку (когда меню уже прилипло) страница съедет на эти 100px, может быть можно как-то заставить, например, обновиться страницу после перехода к якорю или сымитировать повторное нажатие? Чтобы страница просто поправилась, как надо, а не съехала на эти дополнительные 100px. Спасибо.
Ответить

Administrator
0
# 2768
(22:00:23  15.10.2015 г.)

Спасибо за найденную ошибку. Это происходит из-за того, что когда меню "прилипает" к верху экрана, остальное содержимое странички сдвигается вверх на высоту этого самого меню. Отсюда и появляется разница в прокрутке странички с обычным и "прилипшим" меню. Исправляется данный момент очень легко - нужно обернуть меню в блок DIV с заданной высотой, например:
<div style="height:25px;">
<div id="stick_menu">Меню</div>
</div>
P.S. В тему внес исправления.
Ответить

Григорий
0
# 2770
(00:38:59  16.10.2015 г.)

Спасибо! А средствами самого скрипта это можно сделать? Дело в том, что даже с обернутым меню, при повторном нажатии на ссылку (после того, как страница переместилась к якорю) она сдвигается.
Ответить

Administrator
0
# 2772
(11:47:50  16.10.2015 г.)

Странно, у меня ничего не сдвигается. Скиньте ссылку на страничку или полный код странички (опубликовано не будет).
Ответить

Григорий
0
# 2774
(14:25:59  16.10.2015 г.)

Вот смотрите. При переходе с главной страницы (в момент, когда меню еще не прилипло) страница перелетает к якорю неровно. А при повторном нажатии на ссылку окно поправляется. Или при переходе по ссылке с уже прилепленного меню, окно перелетает ровно. Подскажите, как можно решить этот вопрос? Чтобы с главной страницы, когда меню еще не прилипло, окно переходило к якорю и сразу вставало ровно. Спасибо.
Ответить

Administrator
0
# 2776
(15:15:30  16.10.2015 г.)

Так Вы и не обернули меню в блок с явно заданной высотой.
Перед строчкой <ul id="kley"> у Вас есть тег <div>. Задайте ему через CSS высоту и тогда при прилипании меню общая высота странички не будет меняться. Если будут вопросы, то пишите нам на почту, указанную в обратной связи.
P.S. Странное дело. Если блоку DIV добавить еще рамку (<div style="height:100px; border:1px solid #FFFFFF;">), то работает (я с ней проверял), а без рамки - нет.
Либо внутрь блока DIV нужно поместить пробел (&nbsp;), т.к. после прилипания меню блок без рамки или пробела "схлопывается" и высота странички меняется.
Лучше избавиться от данной проблемы при помощи CSS, чем высчитывать скриптом.
Ответить

Евгений
0
# 2519
(18:29:18  10.06.2015 г.)

Спасибо, чудесно всё, только меню находится в центре, а при прилепливании оно сползает влево. Что можно сделать?
Ответить

Administrator
0
# 2520
(21:37:53  10.06.2015 г.)

Нужно смотреть CSS код, т.к. скрипт добавляет либо удаляет класс to_top. В нашем же примере оно не сползает влево...
Ответить

Светлана
0
# 2554
(06:28:53  03.07.2015 г.)

Скажите, а как сделать, чтобы это меню было полупрозрачного цвета? И спасибо за очень интересные скрипты на сайте. Все понятно объясняете. Приятно читать ваш сайт.
Ответить

Administrator
1
# 2556
(23:07:58  03.07.2015 г.)

Добавьте блоку DIV с id="stick_menu" стиль: #stick_menu{ opacity: 0.8; }
Ответить

Alex
1
# 2563
(16:17:37  08.07.2015 г.)

Классный скрипт, спасибо!
Правда решить проблему как у Артема заменой тела скрипта не получилось, модифицированный не работает, пришлось ставить якоря чуть выше с учетом размера меню.
Ответить

Евгений
0
# 2590
(18:00:58  24.07.2015 г.)

Скажите, как сделать, чтобы этот блок скользил только в родительском div и не выезжал за его пределы?
Ответить

Алёшка
1
# 2725
(00:09:09  29.09.2015 г.)

У меня заработало вот так:
<script type="text/javascript">
var start_pos = $('#stick_menu').offset().top;
$(window).scroll(function(){
if ($(window).scrollTop()>=start_pos) {
if ($('#stick_menu').hasClass()==false) $('#stick_menu').addClass('to_top');
}
else $('#stick_menu').removeClass('to_top');
});
</script>
Вставлять перед закрывающим тегом body.
Ответить

Кирилл
0
# 2869
(01:58:34  05.12.2015 г.)

Офигенная статья, огромное спасибо, клиенты захотели такую штуку, думал совсем будет засада, но очень помогло, единственное на wordpress пришлось один стиль убирать при добавлении to_top и потом возвращать назад, а также дополнить to_top чтобы всё было красиво, очень выручил, супер пост! :)
Ответить

Тох
0
# 2919
(18:22:26  20.12.2015 г.)

Спасибо большое, каждый раз, когда нужно делать подобную прилипалку - забываю, как делать, но через поисковик попадаю на этот урок и сразу все становится понятно! Респект!
Ответить

Олег
1
# 2952
(23:54:34  08.01.2016 г.)

Если окно браузера развернуто не на полный экран, то ваше меню находится не по центру (съезжает вправо). Как можно это исправить?
Ответить

Мартина
0
# 3049
(16:12:22  18.02.2016 г.)

Здравствуйте!
Спасибо Вам за статью, я применила Вашу "прилипалку" на своей старой версии сайта - все просто чудесно работает (там Джумла 2.5). Сейчас переделываю сайт на Джумла 3.4, но скрипт совсем не работает. Подскажите, пожалуйста, где может быть проблема, я уже совсем голову сломала.
Ответить

Наталья
0
# 3175
(01:33:49  18.04.2016 г.)

Не так давно видела красивую реализацию прилипающего меню с эффектами дрожания при скроллинге. Кто-нибудь может поделиться знаниями?
Ответить

Владимир
0
# 4423
(09:33:39  23.02.2019 г.)

Здравствуйте. А какую высоту прописать, когда у меня адаптивная верстка?
Ответить

Закрыть
Ваше имя:
197 + 19 =
Добавить комментарий:
Ваше имя:
197 + 19 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Посетителей онлайн: 7

Какую CMS для сайта Вы предпочитаете?