Плавающий виджет. Поддержка IE6.

Приветствую всех!

Некоторое время назад я опубликовал пост, в котором рассказывал о плагине для jQuery, позволяющем создать плавающий виджет.

Но, благодаря читателям этого блога, выяснилось, что протестировал я работу плагина не очень хорошо. За это всем ещё раз огромное спасибо! Очень приятно, что кто-то пользуется моим кодом и помогает делать его лучше.

Но вернёмся к плагину. Проблема возникла в широко известном браузере под названием IE6, о котором уже давно хочется забыть 🙂 … но есть люди, которые им пользуются 🙁

Хуже оказалось то, что не удалось найти хорошего решения. Т.е. виджет в IE6 теперь работает, но хуже, чем в остальных браузерах.

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

Существует несколько способов решения этой проблемы. В частности, хочу посоветовать очень хорошую статью Полноценный fixed в MSIE.

Но, все приведённые в ней решения, требуют использования выражений (expression) в CSS свойствах, и, по-с сути, означают динамическую установку свойства top с помощью JS кода.

Недостаток такого решения в том, что при прокрутке элемент начинает мерцать и «дёргаться». Правда, в той статье предложено решение этой проблемы, но оно предполагает использование фонового изображения для тега body. А если плагин, начнет менять эти стили, то возможны проблемы с дизайном страницы. Т.е. вебмастер сам должен решить как использовать этот приём.

Теперь рассмотрим изменения, которые я внёс в плагин.

curWindow.scroll(function() {
	updateElement();
});

function updateElement() {
	//расстояние от начала страницы до верха её видимой части
	var windowTop = curWindow.scrollTop();
	if (windowTop + config.fromTop < config.minTop) {
		//виджет нужно позиционировать абсолютно
		if ('absolute' != element.css('position')) {
			element.css('position', 'absolute');
			element.css({'top':config.minTop});
		}
	} else {
		//позиционируем виджет фиксированно
		//ie6 не поддерживает фиксированное позиционирование
		if ($.browser.msie && $.browser.version.substr(0,1)<7) {
			element.css({'top': windowTop + config.fromTop + "px"});
		}
		else {
			if ('fixed' != element.css('position')) {
				element.css('position', 'fixed');
				element.css({'top':config.fromTop});
			}
		}
	}
}

Как видите, их не много (начинаются со строки 17).

Во время работы, плагин изменяет позиционирование виджета с абсолютного на фиксированное. Это сделано для того, чтобы виджет не «наезжал» на шапку страницы (подробнее в предыдущей статье). Но теперь, перед изменением позиционирования на фиксированное, выполняется проверка версии браузера.

Если мы имеем дело с IE6, то позиционирование остаётся абсолютным, а фиксация виджета осуществляется за счет изменения свойства top. Функция updateElement выполняется в обработчике события scroll, т.о. пересчёт свойства top при прокрутке страницы выполняется постоянно, что и приводит к мерцаниям.

Во всех остальных браузерах используется свойство fixed.

Ссылка на архив с обновлённым плагином.

Решение, как я и говорил, не идеальное, но всё-таки хороший момент в нём есть. Возможно кто-то из пользователей IE6 увидит, что сайты в новых браузерах смотрятся лучше, и решит, что пора что-то менять 🙂

Удачи!