Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Фиксация div'a вверху страницы при прокрутке (https://javascript.ru/forum/dom-window/41088-fiksaciya-div%27-vverkhu-stranicy-pri-prokrutke.html)

razorg1991 30.08.2013 21:22

Фиксация 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; .

Как это осуществить?

Яростный Меч 30.08.2013 21:51

window.onscroll - событие прокрутки.

для кроссбраузерного определения, насколько проскроллилась страница вниз, можно использовать функцию
function GetBodyScrollTop () {  
	return window.pageYOffset || window.scrollY || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop) || 0;  
}

КЛ@ВИШ_nick 30.08.2013 22:13

c jquery
http://habrahabr.ru/qa/17534/


Часовой пояс GMT +3, время: 12:43.