Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2013, 13: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>
Ответить с цитированием
  #2 (permalink)  
Старый 20.01.2013, 13:50
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от icebergcap
element.style.top =
http://javascript.ru/blog/Andrej-Par...kna-dokumenta-
http://javascript.ru/ui/offset
Ответить с цитированием
  #3 (permalink)  
Старый 20.01.2013, 14:29
Новичок на форуме
Отправить личное сообщение для icebergcap Посмотреть профиль Найти все сообщения от icebergcap
 
Регистрация: 20.01.2013
Сообщений: 2

Сообщение от Deff Посмотреть сообщение
http://javascript.ru/blog/Andrej-Par...kna-dokumenta-
Ссылка не открывается.

А по поводу второй ссылки - так у меня же положение absolute - значит не нужно высчитывать и складывать координаты вложения div'ов, не так ли?
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2013, 14:58
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

событие скрола. при каждом получать координату, относительно экрана, "уходящего " элемента , желательно максимально приближенного к координате 0 по у. Вычислять координаты контейнера с учётом этих 115.
4 строки до кучи

Последний раз редактировалось dmitriymar, 21.01.2013 в 11:02.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перемещение блока при скроллинге region029 jQuery 11 06.10.2013 23:44
Как сделать что при получении фокуса элемент div был полностью виден на эране kraw Events/DOM/Window 2 06.02.2012 22:42
отключения стилей при drag&drop simple Элементы интерфейса 6 15.12.2011 18:18
задействовать только дочерний элемент roma86 jQuery 2 03.10.2009 21:36
FireFox: onmouseover не работает при зажатой кнопке мыши no. Общие вопросы Javascript 4 19.08.2008 13:43