Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

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

Обсуждение темы Полу-скролящаяся панелька в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Вот кто видел новую почту от Яндекса? Как-то видел и до этого, но все таки вспомнил только недавно... Там сверху есть панель, которая ...


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

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

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

Последний раз редактировалось iDeViL; 10.12.2010 в 00:58.. Причина: Добавлено сообщение
 
Старый 10.12.2010, 01:13   #4
вот чтото близкое по смыслу
http://www.ruseller.com/lessons.php?rub=32&id=793

 
Старый 10.12.2010, 10:28   #5
скорее вот это подойдет
 
Старый 13.12.2010, 22:51   #6
вот, написал, обошлось пару строчек.
Спасибо, кто помогал.
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";
    }

 
Старый 13.12.2010, 23:28   #7
Цитата:
Сообщение от 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>
 
Старый 14.12.2010, 18:12   #8
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;
}
 
Старый 14.12.2010, 18:12
Закрытая тема


Опции темы


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


Текущее время: 19:28. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум