Полу-скролящаяся панелька

iDeViL · 10.12.2010, 00:30

Вот кто видел новую почту от Яндекса?
Как-то видел и до этого, но все таки вспомнил только недавно...
Там сверху есть панель, которая при определенном уровне прогрутки как-бы "зависает". Иными словами - её позиция была relative, но в какой-то момент становится fixed, потом обратно при прокрутке вверх. Так понимаю - скрипт, но там есть пару нюансов (у этой панели нет фона, однако какая-то картинка там все равно отображается, и она статична, несмотря на то, что фон страницы прокручивается). В общем, у кого есть разобранный пример работы подобного?

vitaly-go · 10.12.2010, 00:36

скорее принцип такойже как и на всплывающей кнопке пркрутки вверх
много такой хрени в посл шаблонах

iDeViL · 10.12.2010, 00:58

а можно чуть подробнее с ссылкой одной... просто по шаблонам не брожу... буду благодарен.

Добавлено через 16 минут

Ладно, спасибо, решил сам написать, проще будет.
Принцип примерно такой - onScroll у body вызывает метод, тот проверяет уровень прокрутки и показывает дубликат панельки, скрывая эту (чтобы тень не накладывалась) и обратно

vitaly-go · 10.12.2010, 01:13

вот чтото близкое по смыслу
http://www.ruseller.com/lessons.php?rub=32&id=793

vladendark · 10.12.2010, 10:28

скорее вот это подойдет

iDeViL · 13.12.2010, 22:51

вот, написал, обошлось пару строчек.
Спасибо, кто помогал.

PHP код:


			
var sidebar_fix_top = 100; //Высота фиксации
function getBodyScrollTop()
{
  return self.pageYOffset || 
    (document.documentElement && document.documentElement.scrollTop) || 
    (document.body && document.body.scrollTop);
}
window.onscroll = function got()
{
    if (getBodyScrollTop() > sidebar_fix_top) 
    {
    document.getElementById('sidebar').style.top = (getBodyScrollTop()-sidebar_fix_top)+"px";
    }
    if (getBodyScrollTop() < 10) 
    {
    document.getElementById('sidebar').style.top = "0px";
    }
}

vitaly-go · 13.12.2010, 23:28

Цитата:

Сообщение от iDeViL

вот, написал, обошлось пару строчек.

чет я наверное не так сделал но у меня оно неработает

Код:

<head>

<script type="text/javascript">
var sidebar_fix_top = 100; //Высота фиксации
function getBodyScrollTop()
{
  return self.pageYOffset || 
    (document.documentElement && document.documentElement.scrollTop) || 
    (document.body && document.body.scrollTop);
}
window.onscroll = function got()
{
    if (getBodyScrollTop() > sidebar_fix_top) 
    {
    document.getElementById('sidebar').style.top = (getBodyScrollTop()-sidebar_fix_top)+"px";
    }
    if (getBodyScrollTop() < 10) 
    {
    document.getElementById('sidebar').style.top = "0px";
    }
} 
</script>

</head>

<body style="background-color:gray; padding:0; margin:0; ">
  <div style="width:500px; height:1500px;">
     <div id="sidebar" style="background-color:fuchsia; height:10px;"></div>
  </div>
</body>

iDeViL · 14.12.2010, 18:12

position: relative; top: 0px; - у sidebar (ну это понятно. И еще нужно чуть-чуть изменить для кросбраузерности, ослик вроде не дружит с document.getElementById('sidebar'), но это мелочи)
у меня вот код дива

PHP код:


			
<div id="sidebar" class="grid_4"><div style="position: absolute; bottom: 20px;" onclick="got()"><a href="#">bold</a><a href="#">italic</a><a href="#">h2</a><a href="#">h3</a><a href="#">h4</a></div></div>

соответственно

Код HTML:

#sidebar {
	background-image: url(img/ADmin.png);
	position: relative;
	height: 180px;
	width: 100%;
	left: 0px;
	top: 0px;
}

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Помогите: нужно сделать полу-прозрачный, градиентный <div>	blacks	HTML, CSS, JavaScript	0	21.10.2007 19:17
Всплывающая панелька	DEM	Технологии Flash	3	28.04.2003 16:11

10.12.2010, 00:30	#1
iDeViL	Вот кто видел новую почту от Яндекса? Как-то видел и до этого, но все таки вспомнил только недавно... Там сверху есть панель, которая при определенном уровне прогрутки как-бы "зависает". Иными словами - её позиция была relative, но в какой-то момент становится fixed, потом обратно при прокрутке вверх. Так понимаю - скрипт, но там есть пару нюансов (у этой панели нет фона, однако какая-то картинка там все равно отображается, и она статична, несмотря на то, что фон страницы прокручивается). В общем, у кого есть разобранный пример работы подобного?

10.12.2010, 00:36	#2
vitaly-go	скорее принцип такойже как и на всплывающей кнопке пркрутки вверх много такой хрени в посл шаблонах

10.12.2010, 00:58	#3
iDeViL	а можно чуть подробнее с ссылкой одной... просто по шаблонам не брожу... буду благодарен. Добавлено через 16 минут Ладно, спасибо, решил сам написать, проще будет. Принцип примерно такой - onScroll у body вызывает метод, тот проверяет уровень прокрутки и показывает дубликат панельки, скрывая эту (чтобы тень не накладывалась) и обратно Последний раз редактировалось iDeViL; 10.12.2010 в 00:58.. Причина: Добавлено сообщение

10.12.2010, 01:13	#4
vitaly-go	вот чтото близкое по смыслу http://www.ruseller.com/lessons.php?rub=32&id=793

10.12.2010, 10:28	#5
vladendark	скорее вот это подойдет

13.12.2010, 22:51	#6
iDeViL	вот, написал, обошлось пару строчек. Спасибо, кто помогал. PHP код: var sidebar_fix_top = 100; //Высота фиксации function getBodyScrollTop() { return self.pageYOffset \|\| (document.documentElement && document.documentElement.scrollTop) \|\| (document.body && document.body.scrollTop); } window.onscroll = function got() { if (getBodyScrollTop() > sidebar_fix_top) { document.getElementById('sidebar').style.top = (getBodyScrollTop()-sidebar_fix_top)+"px"; } if (getBodyScrollTop() < 10) { document.getElementById('sidebar').style.top = "0px"; } }

14.12.2010, 18:12	#8
iDeViL	position: relative; top: 0px; - у sidebar (ну это понятно. И еще нужно чуть-чуть изменить для кросбраузерности, ослик вроде не дружит с document.getElementById('sidebar'), но это мелочи) у меня вот код дива PHP код: `<div id="sidebar" class="grid_4"><div style="position: absolute; bottom: 20px;" onclick="got()"><a href="#">bold</a><a href="#">italic</a><a href="#">h2</a><a href="#">h3</a><a href="#">h4</a></div></div>` соответственно Код HTML: #sidebar { background-image: url(img/ADmin.png); position: relative; height: 180px; width: 100%; left: 0px; top: 0px; }