ФорумПрограммированиеJavaScript → Плавающий блок при скроллинге

Плавающий блок при скроллинге

  • Tekuto

    Сообщения: 1147 Репутация: N Группа: Адекваты

    Spritz 16 августа 2011 г. 5:26

    Есть 2 блока. Один выше другого. Необходимо сделать так, чтобы верхний блок спускался вниз при скроллинге, при этом наползая на второй (не смещая его). Как такое можно реализовать? В какую сторону копать?

    http://jemand.ru/plavayushhij-blok-s-pomoshhyu-jquery/ - использовал это, но блок второй смещается вместе с плавающим.
  • artoodetoo

    Сообщения: 5139 Репутация: N Группа: в ухо

    Spritz 16 августа 2011 г. 5:36, спустя 10 минут 19 секунд

    position: fixed
    +
    z-index
    ιιlllιlllι унц-унц
  • Tekuto

    Сообщения: 1147 Репутация: N Группа: Адекваты

    Spritz 16 августа 2011 г. 5:38, спустя 1 минуту 37 секунд

    у меня так и все равно не катит.

    #fixed {
    position: fixed;
    z-index: 100;
    }
  • artoodetoo

    Сообщения: 5139 Репутация: N Группа: в ухо

    Spritz 16 августа 2011 г. 5:53, спустя 15 минут 39 секунд

    руки то надо выпрямить

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Плавающий блок с без помощи jQuery</title> rel="stylesheet" href="http://jemand.ru/examples/template-example/style.css" type="text/css" />
    <style>
    .left {
    width:70%;
    float:left;
    }
    .right {
    margin-top: 10px;
    float:right;
    width:20%;
    }
    #fixed {
    color: #fff;
    background: #000 url(http://jemand.ru/examples/template-example/template-example-headline-bg.gif);
    padding:20px;
    border-radius: 10px 0 0 10px;
    -moz-border-radius: 10px 0 0 10px;
    font-family: Georgia;
    position: fixed;
    z-index: 100;
    }
    </style>
    </head>
    <body>
    <!– Заголовок всегда ссылка на саму статью! –>
    <div id="wrap">
    <div id="headline">

    <a href="http://jemand.ru/plavayushhij-blok-s-pomoshhyu-jquery/">Плавающий блок с без помощи jQuery</a>
    </div>
    <div id="content" class="clearfix">
    <div class="left">
    <!– Содержание –>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <!– /Содержание –>
    </div>
    <div class="right">

    <div id="fixed">> Текст фиксированного блока</div>
    </div>
    </div>
    </div>
    <div id="footer">
    Обсудить статью Вы всегда можете на форуме <a href="http://web-forum.ws" target="_blank">Web-Forum.ws</a>!
    </div>

    </body>
    </html>

    Спустя 164 сек.
    это я скопировал с твоей ссылки, как ты можешь догадаться.
    здесь от <div class="right"> можно было бы избавиться, но лениво.
    много лишнего, я просто покоцал все <script> и добавил position — все!
    ιιlllιlllι унц-унц
  • Tekuto

    Сообщения: 1147 Репутация: N Группа: Адекваты

    Spritz 16 августа 2011 г. 6:10, спустя 16 минут 32 секунды

    Обманул) Я position:fixed не поставил.
    Но один хуй. После того, как добавил правило, первый блок ускакал вниз и теперь видна только его верхушка, а второй блок встал на место первого.

    P.S. Я понимаю, что корявые руки. Но ничего, со временем станут прямыми)
  • Tekuto

    Сообщения: 1147 Репутация: N Группа: Адекваты

    Spritz 16 августа 2011 г. 6:17, спустя 6 минут 39 секунд

    Он меня уже заебал за 2 часа))) Поменял местами))))))))))))))
    Спустя 44 сек.
    artoodetoo, спасибо за участие

Пожалуйста, авторизуйтесь, чтобы написать комментарий!