Фиксация div'a вверху страницы при прокрутке
Структура такая:
<div class="div1"></div> <div class="div2"></div> <div class="div3"></div> CSS такой: .div1 { height: 70px; width: 100%; } .div2 { height: 70px; position: relative; width: 100%; z-index: 99999; } .div3 { width:100%; } Нужно чтобы все прокручивалось, НО при достижении div2 верха окна браузера div2 упирался и дальше не прокручивался, т.е. типа как бы зафиксированным стал. Хороший пример есть вот на этом сайте: http://demo.ksenmart.ru/ Смотря в firebag, видно скрипт дает элементу стиль: position: fixed; top: 0px; . А при прокрутке обратно до самого верха скрипт уже дает элементу стиль position: static; top: 0px; . Как это осуществить? |
window.onscroll - событие прокрутки.
для кроссбраузерного определения, насколько проскроллилась страница вниз, можно использовать функцию function GetBodyScrollTop () { return window.pageYOffset || window.scrollY || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop) || 0; } |
c jquery
http://habrahabr.ru/qa/17534/ |
Часовой пояс GMT +3, время: 12:09. |