VPF::Нестандартный background - Форум программистов

micaell

Дата 26.11.2011, 15:54 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 26.11.2011

Репутация: нет
Всего: нет

Нужно реализовать следующий специфический фон для сайта.
Ниже на картинке я постарался максимально ясно изобразить то что нужно в нескольких ситуациях.
1. Сайт открылся. Слева домик - элемент фона, справа контент.
2. Пользователь прокрутил половину контента. Домик держится на том же месте, но контент прокручен до середины.
3. Пользователь прокрутил контент до конца. Домик встал на нижний бар(на холмик).

Неподвижный фон легко реализуется с помощью фиксед бекраунд, но этого не хватает для реализации.
Что может помочь? Может есть какой-то хороший пример?

Присоединённый файл ( Кол-во скачиваний: 12 )

backgr1.gif 53,60 Kb

$дмитрий

Дата 26.11.2011, 16:35 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 10
Всего: 45

Цитата

Что может помочь?

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

micaell

Дата 26.11.2011, 18:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 26.11.2011

Репутация: нет
Всего: нет

Цитата($дмитрий @ 26.11.2011, 16:35)

Есть какой-нибудь пример? Давно не юзал js.

$дмитрий

Дата 26.11.2011, 21:23 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 10
Всего: 45

http://www.1stwebdesigner.com/freebies/com...dmin-templates/

ksnk

Дата 26.11.2011, 23:13 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Код


body
{ 
background-image: url('bg2.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 100%;
}
body.down
{ 
background-image: url('bg1.gif');
background-repeat: no-repeat;
background-attachment:scroll;
background-position: 50px 100%;
}

Код


$(function(){
$(document).scroll( function() {
    if($(document).height()-$(window).height()-$(window).scrollTop()<60)
        $(document.body).addClass('down');
    else
        $(document.body).removeClass('down');

});
})

что-то вроде такого, если пользоваться jQuery. Остаются кроссброузерные проверки. В файрфоксе, вроде, работает

Картинка bg1 - домик на холме, bg2 - просто домик, 60 - величина "холма" на картинке.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »