Скользящий блок на jQuery

В этом уроке мы создадим блок, скользящий по странице - если пользователь будет прокручивать страницу , то такой блок будет всегда скользить за ним, или не всегда... обо всем об этом в примерах. Исходники здесь, все примеры ниже.

Как обычно подключаем jquery (версия 1.2.6), затем плагин jQuery UI Core (версия 1.5.2) и скрипт scrollFollow

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="jquery.scrollFollow.js"></script>

Скрипт scrollFollow позволяет выполнить скользящий блок с различными эффектами, рассмотрим каждый из них: (во всех примерах высота страницы равна 2000 px для наглядности примера).

1. Самый простой способ без применения каких-либо дополнительных действий - это между тегами head вызвать scrollFollow и привязать к нужному нам блоку ( блок с id=example):

<script type="text/javascript">
  $( "#example" ).scrollFollow();
</script>

Посмотреть действие можно на примере 1

2. Вызываем scrollFollow с параметрами (Для работы этого примера, нам потребуется подключить дополнительный плагин jquery.cookie. Делаем это как обычно между тегами head):

<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
 $( document ).ready( function () {
   $("#example" ).scrollFollow( {
    speed: 500,
    offset: 60, 
    killSwitch: "exampleLink", 
    onText: "Перестань за мной ходить!!!", 
    offText: "Скользи за мной!" 
   } );
 } );
</script>

Здесь: speed - Скорость скольжение, мс
offset - Кол-во пикселей, на которое будет отступать блок от верхней части браузера
killSwitch - указываем id объекта, который будет разрешать/запрещать скроллинг;
onText - Этот текст будет написан, когда скролл включен;
offText - Этот текст будет написан, когда скролл выключен;
Посмотреть действие можно на примере 2

3. Скольжение нашего блока внутри контейнера. Здесь все решается просто - добавляем еще один DIV c заданием ему фиксированной высоты. Поместим наш id="example" в новый контейнер #container. Для #container в css пропишем следующие свойства:

<style type="text/css">
		#container {
			width: 250px;
			height: 1200px;
			margin: 10px;
			padding: 10px;
			background: #ccc;
		}
</style>

Здесь роль играет значение высоты, остальное красоты ради Посмотреть действие можно на примере 2

4. Задержка появления нашего блока после того, как пользователь перестал прокручивать страницу:

<script type="text/javascript">
 $( document ).ready( function () {
   $( "#example" ).scrollFollow( {
   delay: 1000 // Выставляем задержку на 1 секунду
   } );
 } );
</script>

Здесь delay - выставляет задержку на 1 секунду Посмотреть действие можно на примере 3

5. Скольжение блока внутри контейнера, определенного scrollFollow. Пример аналогичен примеру 3 с той разницей, что здесь мы зададим, внутри какого контейнера должен скользить блок:

<script type="text/javascript">
 $( document ).ready( function () {
  $( "#example4" ).scrollFollow( { 
   container: "outer" 
  } );
 } );
</script>

Здесь в параметре container: выбираем контейнер, внутри которого будет скользить наш блок Создадим два контейнера div id = "outer" и div id = "inner" . Обратите внимание, что мы будем работать с объектом #example4, которому зададим абсолютное позиционирование top:10px, иначе он окажется внутри контейнера inner, а расстояние, по которому он будет скользить, будет высотой outer. Таким образом, он при скроллинге выйдет за пределы outer

<style type="text/css">
	
		#outer {
			position: relative;
			width: 250px;
			height: 980px;
			padding: 10px;
			background: #999;
		}
		
		#inner {
			height: 500px;
			margin: 180px 0 0 0;
			padding: 10px;
			background: #ccc;}
			
		#example4 {
			position:absolute;
			width: 180px;
			top: 10px;
			margin: 0;
			padding: 20px;
			background: #eee;
			border: 2px solid #42CBDC;
			}
		    .mybox	{height:100px; width:100px; background:#F00;} 
</style>

Таким образом, в контейнере #outer может быть много Div блоков, текстов и всего остального, но #example4 будет проскальзывать поверх всех. Для наглядности я кинул один DIV с классом .mybox в контейнер outer и такой же в inner, #example4 благополучно проскользил поверх них.
Посмотреть действие можно на примере 4

Обратите внимание на то, что в любом примере у скользящего блока (#example, #example4) параметр position в css обязателен и должен быть absolute или relative.