Плавающая панель как у одноклассников

[cocs]

Хочу на сайте сделать панель как у одноклассников, что бы при скролинге панель подымалась вверх, а потом фиксировалась. С помощью CSS можно зафиксировать, только она не будет плавающей, находил несколько вариантов но они не подходили т.к. одна прикреплялась к левому или правому краю, в другом варианте панель почему то мигала при прокрутке, тем самым вызывая раздражение при долгом просмотре.

 

[vladya]

Использовал для этих целей Для просмотра ссылки Войди или Зарегистрируйся, вернее при использовании этого фреймворка задействовал плавающую панель Components Navbar, которая фиксировалась при достижении ей верхней точки страницы. Но Bootstrap - это всего лишь конструктор из деталей которого собирается то, что вам нужно. Это я к тому говорю, что они облегчают решение поставленной задачи, а все алгоритмы поведения этих деталей можно задать самим. Например фиксация этой панели не по краю, а по центру - всё это делается через CSS и javascript.

 

[Mekc]

Добрый вечер, может кто нибудь посоветовать каким образом можно реализовать наличие постоянно плавающей кнопки на голосование в том или ином топе во время прокрутки скрола и перехода со страницы на страницу форума?

 

[gogikman]

Хочу на сайте сделать панель как у одноклассников, что бы при скролинге панель подымалась вверх, а потом фиксировалась. С помощью CSS можно зафиксировать, только она не будет плавающей, находил несколько вариантов но они не подходили т.к. одна прикреплялась к левому или правому краю, в другом варианте панель почему то мигала при прокрутке, тем самым вызывая раздражение при долгом просмотре.

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

html
{
//background: url(about: blank);
}

у блока, относительно которого будет фикс позиция ставим свойство
position: relative;


фиксирование позиции блока
.side-menu-fix
{
position: fixed;
top: 0px;
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop));
}

класс .side-menu-fix добавляем как только верхняя граница окна достигает блока, который необходимо зафиксировать

примерный javascript:

var OffsetMenu = $('.side-menu').offset();
$(window).scroll(function()
{
if($(window).scrollTop() >= OffsetMenu.top)
{
$('.side-menu').addClass('side-menu-fix');
}
else
{
$('.side-menu').removeClass('side-menu-fix');
}
});

 

[metallphilin]

Как сказал vladya это не сложно реализуется через bootstrap вот так примерно выглядит div, который должен приклеиваться к верху экрана:

<div id="my_custom_id" class="row-fluid" data-spy="affix" data-offset-top="195">

....

</div>

Для просмотра ссылки Войди или Зарегистрируйся

data-offset-top - это величина в пикселах, от высоты экрана (что бы не "прыгало"), не сложно измеряется стандартными средствами браузера Chrome, либо подбирается методом научного тыка.

 

[cocs]

Вот такой код заюзал

<div>
<script>
  $(window).scroll(function() {
  if ($(this).scrollTop()>40) $('#scrollable').css({'position':'fixed','top':'0px'});
  else $('#scrollable').css({'top':'0px','position':'absolute'});
  });
</script>
<div id='scrollable' style='width:300px;height:300px;'>
  <div class="block">
 
  </div>
</div>
</div>

Картинки, текст и т.д вставляем в диве блок. Можно задавать отступы и размеры.

 

[APXOH]

Как раз в соседней ветке тема обсуждалась похожая, приведу и здесь красивое решение

 

[exceptionnel02]

Вот такой код заюзал

<script>
  $(window).scroll(function() {
  if ($(this).scrollTop()>40) $('#scrollable').css({'position':'fixed','top':'0px'});
  else $('#scrollable').css({'top':'0px','position':'absolute'});
  });
</script>

Картинки, текст и т.д вставляем в диве блок. Можно задавать отступы и размеры.

Возможно, стоит с animate поэкспериментировать - это предать сайту некоторой анимированности

 

[Vasiliu jukov]

Вот такой код заюзал

<div>
<script>
  $(window).scroll(function() {
  if ($(this).scrollTop()>40) $('#scrollable').css({'position':'fixed','top':'0px'});
  else $('#scrollable').css({'top':'0px','position':'absolute'});
  });
</script>
<div id='scrollable' style='width:300px;height:300px;'>
  <div class="block">
 
  </div>
</div>
</div>

Картинки, текст и т.д вставляем в диве блок. Можно задавать отступы и размеры.

Вставил код через прилинкованный скрипт (шаблон на T3framework лезть в структуру не хочется, вот и вывернулся)
<script src="Для просмотра ссылки Войди или Зарегистрируйся" type="text/javascript"></script>
$(window).scroll(function() { if ($('#Mod195').scrollTop()>100) $('#Mod195').css({'position':'fixed','top':'0px'}); else $('#Mod195').css({'top':'0px','position':'absolute'}); });
Где #Mod195
<div class="ja-moduletable moduletablephoka clearfix" id="Mod195">

И хм.. эффекта нет
в Хроме не вижу обработчика scrollTop для моего <Дива>
подскажите пожалуйста направление рытья ...

 

[mdss]

$(window).scroll(function() { if ($(this).scrollTop()>100) $('#Mod195').css({'position':'fixed','top':'0'}); else $('#Mod195').css({'top':'0','position':'absolute'}); });