16 сентября 2012 (обновлено 16 июля)

Блоки с «плавающей» фиксацией

Практика показывает, что наиболее популярными статьями здесь являются статьи по JavaScript и jQurey в частности.
Поэтому приведу еще одну небольшую статью на эту тему. Сегодня речь пойдет о фиксированных блоках, ныне так популярных.
Начнем, пожалуй, с фиксированного блока с изменяющимся отступом сверху. Такой блок вы могли наблюдать в соц.сети Одноклассники, в поиске Яндекса, в поиске майла и на огромном множестве других популярных ресурсов.
Подобные блоки обычно применяется для навигационных меню, поиска и т.д. то есть для важных элементов, которые всегда должны быть под рукой.


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

сделать это можно следующим образом:

 

$(function() {
	var fixblock_height = $('#fixblock').height(); // определяем высоты фиксированного блока
	var fixblock_pos = $('#fixblock').position().top; ; // определяем его первоначальное положение
	$(window).scroll(function(){

	   if ($(window).scrollTop() > fixblock_pos){ // Если страницу прокрутили дальше, чем находится наш блок
			$('#fixblock').css({'position': 'fixed', 'top':'0px', 'z-index':'10'}); // То мы этот блок фиксируем и отображаем сверху.
			$('#headblock').css('padding-bottom', fixblock_height+'px'); // А чтобы это было плавно, добавляем отсуп снизу для верхнего блока (как будто этот блок там все еще есть)
	   }else{  // Если же позиция скрола меньше (выше), чем наш блок
			$('#fixblock').css({'position': 'static'}); // то возвращаем все назад
			$('#headblock').css('padding-bottom', '0px'); // И убираем отступ
	   }
	})
});   

 

Думаю, тут все ясно из комментов, так что отдельно приводить css и html не буду.
Лучше сразу приведу пример:
Демо Скачать

Плавающий фиксированный блок.

Часто используется для вспомогательной навигации, которая не так важна. это могут быть кнопки социальных сетей, ссылки на сайты партнеров или же ссылка на обратную связь.
Отличие этой реализации от предыдущей в том, что блок имеет один и тот же отступ, а плавает по экрану, в прямом смысле этого слова =)
он плавно меняет свое положение, чтобы оставаться на одном и тм же месте.
можете посмотреть Живой пример.

реализация опять же несложная:

$(function() {
	var offset = $("#fixblock").offset(); // запоминаем первоначальные отсупы
	$(window).scroll(function() { // во время скроллинга
	   if ($(window).scrollTop() > offset.top) { // Если скроллинг больше первоначальной позиции
			$("#fixblock").stop().animate({marginTop: $(window).scrollTop() - offset.top}); // увиличиваем отступ сверху
	   }else{ 
			$("#fixblock").stop().animate({marginTop: 0}); // Иначе отступ нулевой
	   }
	});
});  

 


Демо Скачать

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

Комментарии  

Tod05 февраля 07:02
Цитирую nixtrain:
Да я и не спрашивал именно за плавающие блоки, просто искал решение, как это исправить.


Чтобы это исправить, необходимо чтобы средствами css он занимал ту же позицию, что и средствами JS в начальный момент времени. Тоесть чтобы при событии ready, изменение позиционировани я блока никак не влияло на его фактическое положение.
nixtrain11 февраля 09:02
Цитирую Tod:

Чтобы это исправить, необходимо чтобы средствами css он занимал ту же позицию, что и средствами JS в начальный момент времени. Тоесть чтобы при событии ready, изменение позиционирования блока никак не влияло на его фактическое положение.

Спасибо, буду пробовать.
Павел07 июля 08:07
Благодарю за статью очень помогла.
Спасибо
Costea04 мая 01:05
Круто, а как сделать здесь:

$(function() {
var fixblock_height = $('#fixblock'). height(); // определяем высоты фиксированного блока
var fixblock_pos = $('#fixblock'). position().top; ; // определяем его первоначальное положение
$(window).scroll(function(){

if ($(window).scro llTop() > fixblock_pos){ // Если страницу прокрутили дальше, чем находится наш блок
$('#fixblock').css({'position': 'fixed', 'top':'0px', 'z-index':'10'} ); // То мы этот блок фиксируем и отображаем сверху.
$('#headblock').css('padding-bottom', fixblock_height +'px'); // А чтобы это было плавно, добавляем отсуп снизу для верхнего блока (как будто этот блок там все еще есть)
}else{ // Если же позиция скрола меньше (выше), чем наш блок
$('#fixblock').css({'position': 'static'}); // то возвращаем все назад
$('#headblock').css('padding-bottom', '0px'); // И убираем отступ
}
})
});

чтобы на планшетах и телефонах это не работала, а толико на экранах компов.
Tod04 мая 08:05
Costea
Самым простым вариантом является поставить проверку ширины экрана. И если она меньше, например 1000px, то считать устройство мобильным.

У вас нет прав для комментирования