Главная » 2012 » Октябрь » 24 » Скроллинг страницы и плавающая боковая колонка (Скрипты для ucoz)
24.10.2012, 20:20

Скроллинг страницы и плавающая боковая колонка




На многих сайтах реализовано плавающее боковое меню. В сегодняшней статье я покажу, как это можно сделать. Причем плавать боковое меню будет лишь только при скроллинге страницы. Данный эффект можно реализовать, используя свойство css position со значением fixed, однако для лучшего эффекта воспользуемся возможностями jQuery.

HTML-разметка

Code
<header>
<!-- "шапка" сайта -->
</header>

<div id="wrap">

<div id="sidebar">
<!-- содержимое правой боковой колонки -->
</div>

<div id="container">
<!-- содержимое основного контейнера -->
</div>

</div> <!-- end wrap -->


CSS

Code
header {
  width: 100%;
  height: 100px;
  background: #d7d53f;
  }

#wrap {
  width: 600px;
  margin: 0 auto;
  }

#sidebar {
  float: left;
  width: 200px;
  background: #c2b3c6;
  margin-left: -220px;
  }


Ну а вот перед вами и сам скрипт. Вы можете добавить его к себе непосредственно в файл, вставив его между тегами script, или занесите его в ваш общий файл с javascript кодом, если таковой имеется. Все предельно просто и я думаю, вам не составит никакого труда, при желании, реализовать плавающий боковой блок на своем сайте.

Code
$(document).ready(function(){
  //ф-я offset возвращает координаты отн-но начала страницы  
var sidebartop = $('#sidebar').offset().top;  
   
$(window).scroll(function(){
   
  if( $(window).scrollTop() > sidebartop )  
  { // ф-я scrollTop() возвращает величину вертикального скроллинга
  $('#sidebar').css({position: 'fixed', top: '30px'});
  }
  else  
  {
  $('#sidebar').css({position: 'static'});
  }
  });

  })


всё!
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://www.9zap.com
Категория: Скрипты uCoz | Просмотров: 1870 | Добавил: sold93 | Рейтинг: 5.0/2 |
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]