Фиксированный плавающий блок

Если перед Вами стоит задача разместить на сайте фиксированный блок, который будет всегда находиться на одном месте даже при прокрутке страницы, но CSS свойство position: fixed; не подходит, тогда эта статья для Вас. Из статьи Вы узнаете, как легко и просто разместить фиксированный блок, который будет находиться в верхнем углу страницы, а при прокрутке фиксироваться на указанной Вами высоте.

Как это работает:

Для реализации данного способа воспользуемся библиотекой jQuery.

Добавим следующий скрипт в код нашей страницы:

<script type="text/javascript">
	$(document).ready(function () {
		var offset = $('.fixed').offset(); /* fixed - класс элемента, который фиксируем */
		var topPadding = 130; /* отступ элемента от верха страницы */
		$(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 style="position: relative;">
	<div class="fixed" style="position: absolute;">Фиксированный плавающий div</div>
</div>
<div>Основное содержимое страницы</div>

Получается, у нас должен быть контейнер — элемент, в котором содержится фиксируемый блок с position: relative. И сам элемент с классом fixed и абсолютным позиционированием.

Вы также можете скачать пример работы скрипта из вложения в конце статьи.

Демо


Оставьте свой комментарий

Оставить комментарий от имени гостя

0 / 2500 Ограничение символов
Ваш текст должен быть в пределах 10-2500 символов
Комментарии | Добавить свои
  • Комментарии не найдены