При помощи CSS устанавливаем высоту «шапки» и создаем правила для блока с меню.
/*шапка*/
header{
height:150px;
}
/*фиксированное плавающее меню*/
#top_nav{
top: 150px; /*высота шапки в пикселях*/
position: fixed;
z-index: 1000;
}
Теперь переходим к написанию скрипта на jQuery, который будет фиксировать меню вверху страницы при прокрутке.
<script>
var h_hght = 150; // высота шапки
var h_mrg = 0; // отступ когда шапка уже не видна
$(function(){
var elem = $('#top_nav');
var top = $(this).scrollTop();
if(top > h_hght){
elem.css('top', h_mrg);
}
$(window).scroll(function(){
top = $(this).scrollTop();
if (top+h_mrg < h_hght) {
elem.css('top', (h_hght-top));
} else {
elem.css('top', h_mrg);
}
});
});
</script>
Похожие записи
06.02.2025
Комментариев нет
21.11.2024
Комментариев нет
14.06.2024
Комментариев нет