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

  Александр Маврин   12 комментариев

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>

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

СКАЧАТЬ

Не стесняйтесь делиться записью в социальных сетях. Спасибо

12 комментариев
  1. Спасибо за урок, пригодится в будущем.

  2. Андрей:

    Спасибо за решение, но есть одна проблема: плавающим я сделал довольно большой баннер (высота 600 пикселей) и теперь нельзя посмотреть содержимое футера, потому что баннер «жмет» его вниз. Как бы это исправить?

  3. Valentin:

    Спасибо, хороший скрипт, но был бы еще лучше, с параметром скорости анимации — duration. Как можно его добавить?

  4. Max:

    Спасибо, посмеялся, про css изменение положения блока, и нет времени разбираться с параметром скорости анимации это вы круто написали, куда там петросяну 😀

    .animate({marginTop: $(window).scrollTop() — offset.top + topPadding}),скорость;
    .animate({marginTop:0},скорость цифрой

  5. Zoke:

    Профаны задолбали, перепечатывают с умным видом на своих говносайтах чужой код, не зная элементарных азов делают умный вид, советуют херню всякую, чтоб вам всем зарабатывалось 👿

  6. Почему при прокрутке (чем больше, тем больше) блок уплывают вниз за пределы видимости?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *