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

Владимир | | CSS, HTML, JavaScript, Web разработка.

floating panel logo

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

Некоторое время назад я опубликовал пост, в котором рассказывал о плагине для 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.

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

Source

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

Удачи!

  • Спасибо автору, решение интересное..)
    Чесно говоря был удивлен что в 2010 пользуются ie6

  • Спасибо автору, решение интересное..)
    Чесно говоря был удивлен что в 2010 пользуются ie6

  • странно что еще пользуют. даже мелкософтники самолично признали еще осенью прошлого года, что ie6 must die =)

  • странно что еще пользуют. даже мелкософтники самолично признали еще осенью прошлого года, что ie6 must die =)

  • Как можно до сих пор сидеть на IE6? Столько браузеров хороших вокруг! Столько споров что лучше: хром или лиса. А куча народа еще на IE6 сидят!

  • Как можно до сих пор сидеть на IE6? Столько браузеров хороших вокруг! Столько споров что лучше: хром или лиса. А куча народа еще на IE6 сидят!

  • Я считаю, что давно уже пора не приследовать поддержку ie6! Не будут работать сайты- люди попереходят!

  • Я считаю, что давно уже пора не приследовать поддержку ie6! Не будут работать сайты- люди попереходят!

  • Хороших браузеров действительно много. Но не всегда у пользователя есть выбор. Существует такое понятие как «корпоративная среда» и пользователь в ней вынужден работать с тем, что ему установили.
    И, конечно, есть люди, которые вообще бояться что-либо устанавливать.

  • Хороших браузеров действительно много. Но не всегда у пользователя есть выбор. Существует такое понятие как «корпоративная среда» и пользователь в ней вынужден работать с тем, что ему установили.
    И, конечно, есть люди, которые вообще бояться что-либо устанавливать.

  • Думаю, что такое дополнение не будет лишним! Тем более оно совсем не сложное! А статистика показывает, что ИЕ6 пользуется еще очень много людей!

  • Думаю, что такое дополнение не будет лишним! Тем более оно совсем не сложное! А статистика показывает, что ИЕ6 пользуется еще очень много людей!

  • Спасибо автору, надо попробовать

  • Спасибо автору, надо попробовать

  • Ещё кто то IE6 пользуется? 🙂

  • Ещё кто то IE6 пользуется? 🙂

  • Pingback: Дайджест ссылок за апрель 2010 | Optimizator Field – блог веб разработчика()

  • Вот теперь это полноценный код, который будет работать с большинством браузеров! Спасибо!

  • Gitas

    ок, работает хоть как и предполагалось с мерцанием, но для ие6 пойдет…
    спасибо!!!
    сергей

  • Это точно, для IE6 в самый раз 🙂

  • aleksey8118

    Большое спасибо за статью! Многие интересующие меня вопросы автор четко осветил с разных сторон. Надеюсь, что эта статья поможет мне избежать ошибок! Спасибо

  • просто Гость

    Спасибо за скрипт, но в нем есть один минус.. если у сайта есть достаточно высокий футер, то плавающее окошко заезжает на него.

  • Спасибо за замечание, я учту этот момент в будущих версиях.

  • Pingback: Издание ссылок после апрель 2010 | Блог студии Speed Motion()

  • Kodges

    Пожалуйста сделайте решение чтобы блок не наезжал на футер.
    А еще было бы просто классно если бы блок можно было разместить скажем в другом блоке со статьей, и по мере прокрутки блок оставался бы на месте а текст статьи обтекал блок.

  • Kodges

    И было бы неплохо чтобы была возможность устанавливать координаты для всех возможных разрешений монитора. А то при различных разрешениях блок начинает то над контентом болтаться то еще где. А это значит что использовать его пока не представляется возможным ибо у людей разные разрешения стоят.

    • Я учту пожелание.
      Только блок над контентом оказывается если вы изменяете размер окна браузера. Попробуйте обновить его после ресайза.

  • Kodges

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

    • Кстати, а почему вы сами не хотите внести эти доработки? Плагин ведь очень простой и вроде неплохо документирован 😉

      • Kodges

        Потому что я не программист и знаю только HTML + CSS