ВЫПАДАЮЩИЙ БЛОК ПРИ ПРОКРУТКЕ СТРАНИЦЫ

209

Итак, давайте перейдем к делу.

Для начала,где-нибудь в конце статьи нам понадобится параграф с идентификатором last.

<p id="last"> 
 Какой-нибудь параграф 
</p>

Затем нам потребуется составить html-код для выдвигаемого блока.

<div id="slidebox"> 

<a class="close"></a> 
<p>Integer in purus in ante. (4 of 23 articles)</p> 
<h2>Etiam quis quam eu risus congue malesuada. </h2> 
<a class="more">Read More »</a> 

</div>

Элемент с классом close дает пользователю возможность спрятать блок, при этом показываться блок больше не будет.

Теперь давайте стилизуем наш выдвигаемый блок.

#slidebox{ 
 width:400px; 
 height:100px; 
 padding:10px; 
 background-color:#fff; 
 border-top:3px solid #E28409; 
 position:fixed; 
 bottom:0px; 
 right:-430px; 
 -moz-box-shadow:-2px 0px 5px #aaa; 
 -webkit-box-shadow:-2px 0px 5px #aaa; 
 box-shadow:-2px 0px 5px #aaa; 
}

Блоку задано фиксированное позиционирование, таким образом, блок не меняет своего положения при скроллинге веб-страницы.
Изначально блок спрятан (у свойства right задано отрицательное значение, соответствующее совокупной ширине блока); выдвигать блок будем при помощи jQuery.
Текстовые элементы и ссылки имеют следующие стили:

#slidebox p, a.more{ 
 font-size:11px; 
 text-transform:uppercase; 
 font-family: Arial,Helvetica,sans-serif; 
 letter-spacing:1px; 
 color:#555; 
} 
a.more{ 
 cursor:pointer; 
 color:#E28409; 
} 
a.more:hover{ 
 text-decoration:underline; 
} 
#slidebox h2{ 
 color:#E28409; 
 font-size:18px; 
 margin:10px 20px 10px 0px; 
}

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

Чтобы реализовать плавное выпадение блока добавим немного javascript.
Нам потребуется добавить две функции. Роль первой функции: если пользователь при прокрутке страницы достиг элемента-катализатора, показываем скрытый ранее блок. Вторая функция: когда пользователь жмет по маленькому крестику, блок исчезает. Эти две функции добавьте после подключенной библиотеки jQuery перед закрывающим тегом body или вставьте скрипт в тег head (или создайте и подключите отдельный js-файл):

<script type="text/javascript"> 
$(function() { 
// функцию скролла привязать к окну браузера 
$(window).scroll(function(){ 
 
// distanceTop = (высота: от начала страницы до эл-та #last) - 
//- высота окна браузера 
var distanceTop = $('#last').offset().top - $(window).height(); 
// если величина прокрутки больше distanceTop 
if ($(window).scrollTop() > distanceTop) 
$('#slidebox').animate({'right':'0px'},300); 
else 
$('#slidebox').stop(true).animate({'right':'-430px'},100); 
}); 
//связываем function() с событием click для эл-та .close 
$('#slidebox .close').bind('click',function(){ 
$(this).parent().remove(); 
}); 
}); 
</script>

На этом все.
Надеюсь, Вам пригодится.

ключевые слова не указаны