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

Если перед Вами стоит задача разместить на сайте фиксированный плавающий блок, который будет всегда находиться на одном месте даже при прокрутке страницы, но 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>

В скрипте при загрузке страницы мы получаем координаты нашего блока (в данном случае с классом fixed) в переменную offset. Помимо этого мы указываем стартовую высоту (topPadding), при достижении которой блок начнет прокручиваться вместе со скроллом страницы.

Теперь добавим разметку следующего вида:

<div style="position: relative;">
	<div class="fixed" style="position: absolute;">Фиксированный плавающий div</div>
</div>
<div>Основное содержимое страницы</div>

Обратите внимание на то, что у нас должен быть контейнер — элемент, в котором содержится фиксируемый блок с position: relative. Сам же плавающий блок с классом fixed должен иметь абсолютное позиционирование. Остальное оформление сугубо на Ваше усмотрение. Фиксированный плавающий блок на jQuery готов.

Если сейчас попробовать прокручивать страницу вниз, то при достижении верхним краем окна указанной ранее высоты, блок начинает прокручиваться следом, а при прокрутке вверх, по достижении указанной высоты блок будет останавливаться.

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

Комментарии

Здесь еще никто не оставлял комментарии.

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