Наверное вы видели на некоторых сайтах, как во время прокрутки страницы вниз, один из блоков левого или правого контейнера, не уходил вместе со всеми остальными блоками за пределы видимой части страницы, а оставался висеть сверху. Когда основная часть страницы оказывается выше чем боковые, то какая-то важная информация (например объявление или реклама), находящаяся в одном из боковых блоков - может не получить нужного внимания. Вот в таких случаях, как раз и может пригодится такая функция. Помещаете нужную информацию в плавающий блок, и какова бы ни была высота страницы - он всегда будет на виду, что во много раз повысит вероятность обратить на себя внимание пользователя.
Это усовершенствованная версия скрипта, позволяющая сделать плавающий блок немного умным. Например, в тех случаях когда и сам блок довольно высокий, и нижняя часть (
футер), то при прокрутке страницы до самого низа - блок начнет заезжать на футер, что выглядит не очень. С этим же скриптом - блок будет останавливаться перед футером, не заезжая на него.
Установка скрипта 1. Начнем со скрипта. Вставьте его в нижнюю часть сайта, либо прям так, либо в
js-файл.
Код
<script>
$(document).ready(function(){
var $scrollingBanner = $("#block");
var $footer = $("#footer");
var $BannerOffsetTop = 0;
$(window).scroll(function(){
if($(window).scrollTop() < ($footer.offset().top - 400)) {
$BannerOffsetTop = $scrollingBanner.offset().top - parseInt($scrollingBanner.css('marginTop'),0) -0;
if($(window).scrollTop() > $BannerOffsetTop - 0) {
$scrollingBanner.stop().animate({"marginTop": ($(window).scrollTop() - $BannerOffsetTop + 20) + "px"}, 0);
} else {
$scrollingBanner.stop().animate({"marginTop": 20 + "px"},0);
}
}
});
});
</script>
Разберем, что и за что в скрипте отвечает, и как подключить его к нужному блоку:
#block - идентификатор блока, который вы хотите сделать плавающим. Задайте нужному блоку уникальный идентификатор, и затем впишите его в скрипт вместо этого.
#footer - идентификатор блока нижней части сайта (футера). Задайте блоку футера уникальный идентификатор, и затем впишите его в скрипт вместо этого.
400 - общая высота блока. Нужно посчитать высоту блока, вместе со всеми отступами и бордюрами, и вписать вместо этого числа.
20 - верхний отступ, то есть высота на которой будет висеть плавающий блок.
Ну вот и все, надеюсь все будет понятно.
Не выводит сообщения в чат.
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
