scrollbar

Есть большое количество способов создать фиксированную плавающею боковую панель, но этот способ короткий и элегантный. Конечно это кросс-браузер с использованием библиотеки jQuery с двумя методами инициализации фиксированной панели.

Демо

Фиксированный плавающий scrollbar

HTML

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Простой и короткий метод создать Фиксированный плавающий scrollbar</title>
</head>
<body>

<div class="header">Фиксированный плавающий scrollbar</div>
<div class="content">Здесь содержание</div>
<div class="sidebar">Здесь фиксированный сайдбар</div>
<div class="footer">Нижний колонтитул</div>

</body>
</html>

CSS

.header { width:100%; background:red; height:80px }
.content { width:80%; background:blue; height:800px; float:left }
.sidebar{ width:20%; background:yellow; height:390px; float:right }
.sidebar.fixed { position:fixed; right:50%; margin-right:-50% }
.footer { width:100%; background:gray; height:50px; clear:both }
к меню ↑

Инициализации jQuery

<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script>
$(window).load(function(){
$window = $(window),
$sidebar = $(".sidebar"),
sidebarTop = $sidebar.position().top,
$sidebar.addClass('fixed');

$window.scroll(function(event) {
    scrollTop = $window.scrollTop(),
    topPosition = Math.max(0, sidebarTop - scrollTop),
    $sidebar.css('top', topPosition);
});
});
</script>

Первые две строки только для повышения производительности. Хранение ссылок в окне боковой панели и в переменные как они будут ссылаться на события (scroll) прокрутки. Мы также сохранили лидирующие позиции на боковой панели прежде чем принимать fixed (фиксированное) положение путем добавления класса.

Мы записываем текущею позицию window.scrollTop () и Math.max. Это делает элегантный вид. Кроме того, можно заменить 0 со смещением значения. Это значение используется чтобы установить верхнюю стартовую позицию боковой панели.

к меню ↑

Еще метод

Если вы хотите чтобы боковая панель обтекала только в пределах диапазона при прокрутке и никогда не перекрывала нижний колонтитул.

В приведенном выше шаге CSS измените высоту нижнего колонтитула как показано ниже и посмотрите что получится:

.footer { 
   width:100%; 
   background:gray; 
   height:100px; 
   clear:both 
}

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

Для этого код:

$(document).load(function() {

   /** The code starts here **/
   $window = $(window),
   $sidebar = $(".sidebar"),
   sidebarTop = $sidebar.position().top,
   sidebarHeight = $sidebar.height(),
   $footer = $(".footer"),
   footerTop = $footer.position().top,
   $sidebar.addClass('fixed');

   $window.scroll(function(event) {
      scrollTop = $window.scrollTop(),
      topPosition = Math.max(0, sidebarTop - scrollTop),
      topPosition = Math.min(topPosition, (footerTop - scrollTop) - sidebarHeight);
      $sidebar.css('top', topPosition);
   });
   /** The code ends here **/

});

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