Зафиксировать элемент при скроллинге.
Суть скрипта в том, чтобы меню, которое изначально находится на абсолютной высоте 115 пикселов, при прокрутке вниз останавливалось вверху окна просмотра (т.е. с параметрами position: fixed и top:0)
Ну и, естественно, чтобы при скроллинге вверх и достижении прокрутки на 115 пикселов элемент вставал на место и становился position: absolute По логике вроде всё правильно, только вот не работает. Браузер - Chrome.
<html>
<head>
<script type="text/javascript">
function getElementPosition(elemId)
{
var elem = document.getElementById(elemId);
var t = 0;
while (elem)
{
t += elem.offsetTop;
elem = elem.offsetParent;
}
return {"top":t};
}
window.onscroll = function() {
var pos = getElementPosition('navigation');
var element = document.getElementById('navigation');
if (pos.top <= 0){
element.style.position = 'fixed';
element.style.top = '0 px';
}
else {
element.style.position = 'absolute';
element.style.top = '115 px';
}
}
</script>
<style>
#navigation {
position:absolute;
top:115px;
}
</style>
</head>
<body>
<div id="navigation" class="navigation">
<a href='index.php?p=1'>1</a>
<a href='index.php?p=2'>1</a>
<a href='index.php?p=3'>1</a>
<a href='index.php?p=4'>1</a>
</div>
</body>
</html>
|
Цитата:
http://javascript.ru/ui/offset |
Цитата:
А по поводу второй ссылки - так у меня же положение absolute - значит не нужно высчитывать и складывать координаты вложения div'ов, не так ли? |
событие скрола. при каждом получать координату, относительно экрана, "уходящего " элемента , желательно максимально приближенного к координате 0 по у. Вычислять координаты контейнера с учётом этих 115.
4 строки до кучи |
| Часовой пояс GMT +3, время: 22:16. |