Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Как заставить DIV двигаться вместе с экраном


Автор: Rusman 11.7.2013, 19:58
Здравствуйте!

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

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

Автор: ksnk 12.7.2013, 11:15
Например так (код с живого сайта + 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 в скрипте, означает позицию скроллера, когда див становится приклеенным и наоборот.
Рихтуется по месту, рашпилем.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)