Недавно у меня появился проект со специфичным дизайном. Вроде бы все как обычно, но пришлось удовлетворить потребности дизайнера, который захотел чтобы фоновая картинка при скроле всегда была на одном и том же месте и принимала тот размер, который ей позволяет окно браузера. Так что обойтись стандартным position: fixed, который работает в IE > 6 и остальных браузерах не получалось.
Мой вариант как это сделать с использование jQuery
$('body').append(str);
$('body').append("<div " +
«id='rbTestSizeDiv' » +
«style='width: 100%; » +
" height: 100%; " +
" position: fixed; " +
" left: 0; " +
" top: 0; " +
" visibility: hidden; " +
" z-index: -1'>\n");
}
Как это все запустить:
Реализацию конечно не я придумал, но я ее немного видоизменил. А что именно:
1. Картинка сохраняет свои пропорции
2. Уменьшил частично код реализации использую jQuery
Думаю я увижу комментарии что не очень красиво реализовано и т.д. Обещаю переписать, и еще раз опубликовать.
Рабочий пример.
Мой вариант как это сделать с использование jQuery
/* Fixed BG, jQuery, FlipFlip.ru (c) 2009 */
/* Поддерживает ли браузер position: fix; */
function rbSupportsFixed() {
if ($.browser.msie && $.browser.version >= 6.0 && $.browser.version < 7.0) return false;
return true;
}
var rbCenter = false;
var rbLastScrollTop = null;
var rbSimulateTop = 0;
/* Инициализация фона */
function rbInit() {
if (rbSupportsFixed()) {
div = document.getElementById('rbBackgroundDiv');
div.style.position = 'fixed';
}
setTimeout("rbReposition()", 50);
rbResize();
}
/* действие при ресайзе окна */
function rbResize() {
var width;
var height;
var x, y, w, h;
if ($.browser.msie) {
width = parseInt(document.documentElement.clientWidth);
height = parseInt(document.documentElement.clientHeight);
} else if ($.browser.opera) {
width = parseInt(window.innerWidth) - 16;
height = parseInt(window.innerHeight);
} else {
testsize = $('#rbTestSizeDiv');
width = $(testsize).width();
height = $(testsize).height();
}
div = $('#rbBackgroundDiv');
img = $('#rbBackground');
if ($(img).width() == 0 || $(img).height() == 0) {
setTimeout("rbResize()", 100);
return;
}
/* Если надо зафиксировать изображение по центру */
if (rbCenter) {
w = width;
h = width * ($(img).height() / $(img).width());
x = 0;
y = (height - h) / 2;
if (y < 0) {
h = height;
w = height * ($(img).height() / $(img).width());
y = 0;
x = (width - w) / 2;
}
} else {
x = 0;
y = 0;
w = width;
h = height;
}
$(div).css('left', parseInt(x) + "px");
if (rbSupportsFixed()) $(div).css('top', parseInt(y) + "px");
else rbSimulateTop = parseInt(y);
/* Данные две сточки нужны, если надо чтобы изображение сохранило пропорции. 2ая строчка если нужно поднять картинку и низ картинки был внизу страницы */
$(img).css('width', parseInt(w) + "px");
$(div).css('top', parseInt(h) - $(img).height() + "px");
$(div).css('visibility', 'visible');
rbLastScrollTop = null;
rbReposition();
}
/* Если нет поддержки fixed делаем эмуляцию */
function rbReposition() {
if (rbSupportsFixed()) return;
setTimeout("rbReposition()", 100);
body = document.documentElement;
var scrollTop = body.scrollTop;
if (scrollTop == rbLastScrollTop) return;
rbLastScrollTop = scrollTop;
div = document.getElementById('rbBackgroundDiv');
var rbBodyDiv = document.getElementById('rbBodyDiv');
var pos = 0;
var max = rbBodyDiv.offsetHeight - rbBodyDiv.clientHeight;
if (max < 0) max = 0;
if (scrollTop <= max) pos = scrollTop;
else pos = max;
if (pos < 0) pos = 0;
height = $('body').height() - $(window).height();
if (pos <= height) div.style.top = pos + rbSimulateTop;
}
/* Открывает див */
function rbOpen(center) {
rbCenter = center;
document.write("\n");
}
/* Закрываем див и вставляем во второй див картинку */
function rbClose(image) {
$('body').append("\n");
str = "<div " +
"id='rbBackgroundDiv' " +
"style='position: absolute; " +
" visibility: hidden; " +
" top: 0px; " +
" left: 0px; " +
" z-index: 0'>" +
"
" +
"
\n";$('body').append(str);
$('body').append("<div " +
«id='rbTestSizeDiv' » +
«style='width: 100%; » +
" height: 100%; " +
" position: fixed; " +
" left: 0; " +
" top: 0; " +
" visibility: hidden; " +
" z-index: -1'>\n");
}
Как это все запустить:
rbOpen(false);
$(document).ready(function() {
rbClose('/images/background_body.jpg');
$(window).resize(function() { rbResize(); });
$(window).each(function() { rbInit(); });
}
Реализацию конечно не я придумал, но я ее немного видоизменил. А что именно:
1. Картинка сохраняет свои пропорции
2. Уменьшил частично код реализации использую jQuery
Думаю я увижу комментарии что не очень красиво реализовано и т.д. Обещаю переписать, и еще раз опубликовать.
Рабочий пример.