Фиксация меню
Здравствуйте. На странице горизонтальное меню расположенно снизу страницы (bottom:0). Хотелось бы реализовать, что бы при прокрутки страницы меню фиксировалось при достижении верха окна(top:0)? Нашёл такую ф-цию
var h_hght = 650; // высота шапки var h_mrg = 0; // отступ когда шапка уже не видна $(function(){ $(window).scroll(function(){ var top = $(this).scrollTop(); var elem = $('#header'); if (top+h_mrg < h_hght) { elem.css('top', (h_hght-top)); } else { elem.css('top', h_mrg); } }); }); Так работает, но с пиксилями не пойдёт нужно 100%, но если указываю 100%, то при малейшем скролинге меню сразу прыгает к верху.Подскажите как сделать правильно. |
ureech,
сохранить top элемента h в функции скрола измерять h и величину скрола - скрол больше h делать top = скролл иначе top = h |
:write:
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> body { height: 2000px; } .orange { background: #FFCC00; } .orange + div{ display: block; } span { cursor: pointer; } #header{ bottom: 0px; position: absolute; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ var elem = $("#header"), h = elem.offset().top; $(window).scroll(function(){ var top = $(this).scrollTop(); elem.css('top', top > h ? top : h ) }); }); </script> </head> <body> <div id='header'> <div class='first'> <span class='info orange'>Информация</span> <div class='main'> <span class='info_show show '>текст1</span> </div> </div> <div class='first'> <span class='info'>Информация2</span> <div class='main'> <span class='info_show '>текст2</span> </div> </div> <div class='first'> <span class='info'>Информация3</span> <div class='main'> <span class='info_show '>текст3</span> </div> </div> </div> </body> </html> |
Большое спасибо, всё работает.
|
Часовой пояс GMT +3, время: 08:56. |