Плавающий по горизонтали блок div

Категория: Веб-программирование| Интересное| Полезные заметки

12 Авг 2013

Плавающий блок может сделать интерфейс Вашего сайта еще удобнее, чем он есть сейчас! Например, у Вас двухколоночный дизайн сайта, меню и контент соответственно. Допустим, у Вас есть страница, где в виде контента располагается анкета для заполнения. Очень большая и длинная анкета с миллионом вопросов. А в Колонке с меню расположены управляющие кнопки «Сохранить анкету» и «Отмена». Когда пользователь будет отвечать на последние вопросы страницы, а для этого он прокрутит страницу максимально вниз, он потеряет из виду кнопки управления, так как они останутся сверху страницу. Неудобно! Пользователю придется листать всю анкету назад после заполнения, чтобы сохранить ответы.

А представьте, что блок с кнопками поехал вниз вместе с пользователем, и когда тот заполнил все вопросы анкеты, ему не нужно будет пролистывать всю её назад, чтобы нажать «Сохранить анкету», кнопки будут в зоне видимости, так как «приехали» вниз страницы вместе с пользователем.

Для того, чтобы сделать блок плавающим по горизонтали мы будем использовать css свойство position, а именно его значение fixed. Оно зафиксирует блок на странице, там, где мы укажем, вне зависимости от прокрутки страницы.

А выставлять position: fixed, мы будем в тот момент, когда пользователь прокрутил страницу до верхнего края плавающего блока. Добавим еще зазор в 10px между верхней границей окна и блока, чтобы это смотрелось эстетично.

И Все наши действия мы помещаем в событие прокрутки окна $(window).scroll(). В результате у нас получается следующий код:

<script type="text/javascript">
	$(window).load(function() {
		var block = $('#yourblock'); // ID Вашего плавающего блока
		var position = block.position();
		var windowpos = 0;
		$(window).scroll(function() {
			 wintop = $(window).scrollTop();
			 if(wintop<position.top+10){
				block.css({position: 'relative', top: '0px', left: '0px'});
			 } else {
				block.css({position: 'fixed', top: '10px', left: position.left+'px'});
			 }
		});
	});
</script>

Данные строчки необходимо вставить в раздел <head></head> Вашей страницы. Подобные блоки сейчас можно встретить на многих сайтах, правда обычно в них содержится реклама. По понятным причинам реклама в плавающих блоках – очень эффективна