Search
Write a publication
Pull to refresh

Фиксированный фон под размер окна

Недавно у меня появился проект со специфичным дизайном. Вроде бы все как обычно, но пришлось удовлетворить потребности дизайнера, который захотел чтобы фоновая картинка при скроле всегда была на одном и том же месте и принимала тот размер, который ей позволяет окно браузера. Так что обойтись стандартным position: fixed, который работает в IE > 6 и остальных браузерах не получалось.
Мой вариант как это сделать с использование 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

Думаю я увижу комментарии что не очень красиво реализовано и т.д. Обещаю переписать, и еще раз опубликовать.

Рабочий пример.
Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.