VPF::Как заставить DIV двигаться вместе с экраном

Rusman

Дата 11.7.2013, 19:58 (ссылка)

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

Загрузка ...

Опытный

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

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

Здравствуйте!

Задача стоит такая, чтобы заставить DIV двигаться вместе с экраном, но никак работает свойстов position fixed.
А допустим див у нас расположен по середине сайта по умолчанию, как только экран дошел до него, то див ниже двигается с ним.

Всем большое спасибо!

ksnk

Дата 12.7.2013, 11:15 (ссылка)

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

Загрузка ...

прохожий

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

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

Например так (код с живого сайта + jQuery, возможны накладки ;))

Код


<div id="z">
    <a style="width:120px;" href="...">&nbsp;</a>
...
</div>

Код


#z{
    background:url(../img/pocimy.png) no-repeat;
    width:760px;
    height:32px;
    float:right;
    margin-top:8px;
    margin-right:1px;
    z-index: 999;
}
#z a {
    text-decoration:none;
    outline:none;
    float:left;
    height:100%;
    width:100px;
}

Код


var state = -1;
$(window).scroll(function () {
    if ($(window).scrollTop() >= 192) {
        if (state != 1) {
            state = 1;
            $('#z').css({
                position: 'fixed',
                left: '50%', top: -7,
                'margin-left': -261,
                'border-radius': 4,
                '-webkit-box-shadow': '0 0 10px rgba(0,0,0,0.5)',
                'box-shadow': '0 0 10px rgba(0,0,0,0.5)'});
        }
    } else if (state != 2) {
        state = 2;
        $('#z').css({
            position: 'relative',
            left: 0, top: 0,
            'margin-left': 0,
            '-webkit-box-shadow': '0 0 10px rgba(0,0,0,0)',
            'box-shadow': '0 0 00px rgba(0,0,0,0)'});
    }
});

Магическая цифра 192 в скрипте, означает позицию скроллера, когда див становится приклеенным и наоборот.
Рихтуется по месту, рашпилем.

Это сообщение отредактировал(а) ksnk - 12.7.2013, 11:20

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

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

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