Показать сообщение отдельно
  #1 (permalink)  
Старый 20.01.2013, 14:40
Новичок на форуме
Отправить личное сообщение для icebergcap Посмотреть профиль Найти все сообщения от icebergcap
 
Регистрация: 20.01.2013
Сообщений: 2

Зафиксировать элемент при скроллинге.
Суть скрипта в том, чтобы меню, которое изначально находится на абсолютной высоте 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>
Ответить с цитированием