jQuery плавающий блок

Здравствуйте, друзья. Иногда, для того, чтобы привлечь внимание посетителя сайта, приходится идти на какие-то ухищрения и придумывать новые фишки. Я конечно против всевозможных всплывающих окон и других навязчивых элементов, типа: «Подождите, у нас есть для вас подарок.» Я считаю, что такой подход в корне неверен. Наоборот, пользователи будут обходить такие сайты стороной. Да они и так их обходят, а владельцам ничего не остается, как давать платную рекламу своего сайта и чего хуже — спамить. Исключением является модальное окно на jQuery.

Но в этой статье речь совсем не об этом. А о том, как сделать на своем сайте плавающий блок на jQuery и разместить в нем любую информацию. Такие блоки намного гармонично смотрятся на сайте и не раздражают пользователя. Их еще называют прилипающими. На демо странице вы можете посмотреть, как на jQuery плавающем блоке размещена некая информация.

Демо

Подключить такой блок просто. Первым делом подключаем саму библиотеку jQuery, если у вас она еще не подключена.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

И подключаем сам скрипт на странице с идентификатором блока.

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
	$(function() {
		var offset = $("#fixed").offset();
		var topPadding = 15;
		$(window).scroll(function() {
			if ($(window).scrollTop() > offset.top) {
				$("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
			}
			else {$("#fixed").stop().animate({marginTop: 0});};});
	});
</script>

Сам блок будет выглядеть на сранице так:

<div id="fixed">Содержимое блока</div>

Таким образом можно делать не только боковые плавающие блоки, но и сделать плавающее меню. На некоторых сайтах такое меню бывает очень кстати. Например на «одноклассниках» без такого меню будет непросто. В блок можно вставить все, что угодно, вплоть до видео. Надеюсь вам не нужно рассказывать о влиянии видео-контента на посещаемость сайта. Скачайте исходники плавающего меню и поэкспериментируйте с ним. Возможно у вас получится более креативное решение, чем простой плавающий блок. есть так же скрипт плавной прокрутки вверх страницы. Желаю удачи.

СКАЧАТЬ