Приклеивающееся или прилипающее меню
Если Вам необходимо, чтобы меню сайта при прокрутке пользователем странички вниз постоянно оставалось вверху окна в зоне видимости, то можем порекомендовать Вам воспользоваться нашим скриптом на jQuery для реализации приклеивающееся к верху окна меню.
Наглядно посмотреть работу предлагаемого скрипта приклеивающегося меню Вы можете чуть ниже. Для этого прокрутите страничку немного вниз, и Вы увидите, как пример меню "прилипнет" к верхнему краю окна и будет оставаться там (в зоне видимости). При прокрутке странички вверх (выше изначального места расположения меню), меню займет свое первоначальное положение.
Хотим отметить, что вместо меню можно "приклеивать" к верхнему краю окна любой другой элемент странички (изображение, баннер или ссылку).
Итак, перейдем к реализации данного скрипта на своем собственном сайте. Для этого Вам потребуется подключить библиотеку jQuery. Делается это так:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
Далее необходимо добавить на сайт стиль для элемента, который будет применен для приклеивания данного элемента к верхнему краю окна. В нашем случае приклеиваться будет блок DIV, в который мы поместили таблицу со ссылками:
<style type="text/css">
.to_top { position: fixed; top: 0px; }
#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", внутри которого располагается таблица:
<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" в зависимости от того, на сколько прокручена страничка:
<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>
Таким образом, воспользовавшись нашим скриптом приклеивающегося меню, Вы сможете зафиксировать в зоне видимости необходимые Вам элементы (изображения, меню и т.д.) при прокрутке странички пользователем вниз.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
$(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);
}
});
});
Стили перемещаются если сделать, чтоб меню было поверх всего, а как это сделать я не знаю.
<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;">
Про красный цвет не понял, что именно нужно, но думаю, Вы и сами справитесь.
Когда нажимаю на любую из ссылок, идёт перемещение внутри страницы.
После перемещения, прилипающее меню наезжает на name ссылку. Чем больше задаю высоту прилипающего меню, тем больше наезжает меню на ссылающийся контент. Помогите разобраться, сделать так чтобы скролл останавливался в нужном месте и залипающее меню не наезжало на текст.
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');
});
});
Другой Ваш вопрос перенес на форум - Ссылка на конкретный "Заголовок, материал" на странице без "#".
<div style="height:25px;">
<div id="stick_menu">Меню</div>
</div>
P.S. В тему внес исправления.
Перед строчкой <ul id="kley"> у Вас есть тег <div>. Задайте ему через CSS высоту и тогда при прилипании меню общая высота странички не будет меняться. Если будут вопросы, то пишите нам на почту, указанную в обратной связи.
P.S. Странное дело. Если блоку DIV добавить еще рамку (<div style="height:100px; border:1px solid #FFFFFF;">), то работает (я с ней проверял), а без рамки - нет.
Либо внутрь блока DIV нужно поместить пробел ( ), т.к. после прилипания меню блок без рамки или пробела "схлопывается" и высота странички меняется.
Лучше избавиться от данной проблемы при помощи CSS, чем высчитывать скриптом.
Правда решить проблему как у Артема заменой тела скрипта не получилось, модифицированный не работает, пришлось ставить якоря чуть выше с учетом размера меню.
<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.
Спасибо Вам за статью, я применила Вашу "прилипалку" на своей старой версии сайта - все просто чудесно работает (там Джумла 2.5). Сейчас переделываю сайт на Джумла 3.4, но скрипт совсем не работает. Подскажите, пожалуйста, где может быть проблема, я уже совсем голову сломала.