Ездящее меню в пределах блока

Тема в разделе "Верстка", создана пользователем B0nuse, 11 ноя 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. B0nuse

    B0nuse Постоялец

    Регистр.:
    6 июн 2009
    Сообщения:
    106
    Симпатии:
    21
    Уважаемые, подскажите решение.

    Дано: html страница с обычной версткой div'ами (хеадер, левое меню, центральная часть, правое меню, футер). Высота блоков может меняться.

    Задача: создать div (блок меню может меняться по высоте), который будет двигаться в пределах блока (например, левого меню) вместе с прокруткой страницы в браузере вниз или вверх.

    ЗЫ: Кто видел в одноклассниках рекламный блок слева - точно поймет.
     
  2. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
  3. gerasimov.nikita

    gerasimov.nikita Писатель

    Регистр.:
    4 ноя 2012
    Сообщения:
    8
    Симпатии:
    1
    НАсколько я понял, пригодится position:fixed, а так же свойство clip из css3. Об этих свойствах можете почитать в документации
     
  4. AGENT131313

    AGENT131313 Забанен

    Регистр.:
    17 мар 2009
    Сообщения:
    282
    Симпатии:
    28
    B0nuse нравится это.
  5. Sirofim

    Sirofim Писатель

    Регистр.:
    8 ноя 2012
    Сообщения:
    6
    Симпатии:
    1
    пример реализации хороший, а кто-то настраивал, чтоб он те так резко дергался, а более плавно?
     
  6. B0nuse

    B0nuse Постоялец

    Регистр.:
    6 июн 2009
    Сообщения:
    106
    Симпатии:
    21
    Основная проблема в том, что когда меню становится по высоте больше, чем высота экрана (например, на ноутах), то просто свойство fixed не даст Вам возможности увидеть низ меню.
    Тоже самое с вариантом от AGENT131313

    Вы можете подсказать как сделать такое же меню как тут по ссылке слева?
     
  7. AGENT131313

    AGENT131313 Забанен

    Регистр.:
    17 мар 2009
    Сообщения:
    282
    Симпатии:
    28
    А что составляет труда вытащить его из исходного кода?
     
  8. B0nuse

    B0nuse Постоялец

    Регистр.:
    6 июн 2009
    Сообщения:
    106
    Симпатии:
    21
    Не хватает знаний.
    Возьмем Ваш пример и немного его переделаем
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
    TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Плавающий блок</title>
    <style type="text/css">
    #main {
        width:900px;
        margin:0 auto;
    }
    .colRight {
        width:70%;
        float:left;
    }
    .colLeft {
        float:left;
        width:30%;
    }
    h1{
        background:#CCC;
        padding:50px;
    }
    #fixed {
        background:#CCC;
        padding:20px;
        margin-right:20px;
    }
    </style>
    <script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-affix.js"></script>
    </head>
    <body>
    <div id="main">
        <h1>Плавающий блок. Прокрутите страницу вниз</h1>
        <div class="colLeft">
            <div id="fixed" data-spy="affix"><p>Я зафиксированный блок</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p><p>Меню</p></div>
        </div>
        <div class="colRight">
            <p>«Превратим Я зафиксированный блок каждого китайца в маленький заводик по выработке удобрений». Не помню, откуда это. Надо бы записать. Я много видел разного креатива, но такого Я зафиксированный блок я даже не мог себе представить. Сам по себе Я зафиксированный блок еще ничего не доказывает: порой курица снесет яйцо, а кудахчет так, словно снесла целую планету. В конце декабря и начале января Я зафиксированный блок выпадает шанс прилично заработать. Эксперимент продолжается: организованный рестораном «Я зафиксированный блок» проект набирает ход. На сей раз экспертам было предложено уникальное блюдо: «ПереЯ зафиксированный блок-недоЯ зафиксированный блок». В каждом случае, к блюду подбирался индивидуальный аккомпанимент. Не все то, что ты не можешь доказать, является Я зафиксированный блок. Я зафиксированный блок – следствие бесполезного пробуждения. По Кодексу Наполеона (гражданский кодекс французов), вступившему в силу 21 марта 1804 года, муж мог требовать от жены развода за адюльтер, а мужская измена не могла быть достаточным основанием для развода, если только муж не брал с собой Я зафиксированный блок в дом. Наши современники не знают, не понимают, что такое адюльтер, но прекрасно знают, что такое Я зафиксированный блок. Я знаю вкус Я зафиксированный блок, но жевать нечего, а когда будет, что пожевать, боюсь Я зафиксированный блок не почувствовать. Я зафиксированный блок – пристегните самое дорогое. А вот «Колб йыннаворискифаз я» – это Я зафиксированный блок наоборот.</p>
            <p>«Превратим Я зафиксированный блок каждого китайца в маленький заводик по выработке удобрений». Не помню, откуда это. Надо бы записать. Я много видел разного креатива, но такого Я зафиксированный блок я даже не мог себе представить. Сам по себе Я зафиксированный блок еще ничего не доказывает: порой курица снесет яйцо, а кудахчет так, словно снесла целую планету. В конце декабря и начале января Я зафиксированный блок выпадает шанс прилично заработать. Эксперимент продолжается: организованный рестораном «Я зафиксированный блок» проект набирает ход. На сей раз экспертам было предложено уникальное блюдо: «ПереЯ зафиксированный блок-недоЯ зафиксированный блок». В каждом случае, к блюду подбирался индивидуальный аккомпанимент. Не все то, что ты не можешь доказать, является Я зафиксированный блок. Я зафиксированный блок – следствие бесполезного пробуждения. По Кодексу Наполеона (гражданский кодекс французов), вступившему в силу 21 марта 1804 года, муж мог требовать от жены развода за адюльтер, а мужская изменане могла быть достаточным основанием для развода, если только муж не брал с собой Я зафиксированный блок в дом. Наши современники не знают, не понимают, что такое адюльтер, но прекрасно знают, что такое Я зафиксированный блок. Я знаю вкус Я зафиксированный блок, но жевать нечего, а когда будет, что пожевать, боюсь Я зафиксированный блок не почувствовать. Я зафиксированный блок – пристегните самое дорогое. А вот «Колб йыннаворискифаз я» – это Я зафиксированный блок наоборот.</p>
            <p>«Превратим Я зафиксированный блок каждого китайца в маленький заводик по выработке удобрений». Не помню, откуда это. Надо бы записать. Я много видел разного креатива, но такого Я зафиксированный блок я даже не мог себе представить. Сам по себе Я зафиксированный блок еще ничего не доказывает: порой курица снесет яйцо, а кудахчет так, словно снесла целую планету. В конце декабря и начале января Я зафиксированный блок выпадает шанс прилично заработать. Эксперимент продолжается: организованный рестораном «Я зафиксированный блок» проект набирает ход. На сей раз экспертам было предложено уникальное блюдо: «ПереЯ зафиксированный блок-недоЯ зафиксированный блок». В каждом случае, к блюду подбирался индивидуальный аккомпанимент. Не все то, что ты не можешь доказать, является Я зафиксированный блок. Я зафиксированный блок – следствие бесполезного пробуждения. По Кодексу Наполеона (гражданский кодекс французов), вступившему в силу 21 марта 1804 года, муж мог требовать от жены развода за адюльтер, а мужская измена не могла быть достаточным основанием для развода, если только муж не брал с собой Я зафиксированный блок в дом. Наши современники не знают, не понимают, что такое адюльтер, но прекрасно знают, что такое Я зафиксированный блок. Я знаю вкус Я зафиксированный блок, но жевать нечего, а когда будет, что пожевать, боюсь Я зафиксированный блок не почувствовать. Я зафиксированный блок – пристегните самое дорогое. А вот «Колб йыннаворискифаз я» – это Я зафиксированный блок наоборот.</p>
            <p>«Превратим Я зафиксированный блок каждого китайца в маленький заводик по выработке удобрений». Не помню, откуда это. Надо бы записать. Я много видел разного креатива, но такого Я зафиксированный блок я даже не мог себе представить. Сам по себе Я зафиксированный блок еще ничего не доказывает: порой курица снесет яйцо, а кудахчет так, словно снесла целую планету. В конце декабря и начале января Я зафиксированный блок выпадает шанс прилично заработать. Эксперимент продолжается: организованный рестораном «Я зафиксированный блок» проект набирает ход. На сей раз экспертам было предложено уникальное блюдо: «ПереЯ зафиксированный блок-недоЯ зафиксированный блок». В каждом случае, к блюду подбирался индивидуальный аккомпанимент. Не все то, что ты не можешь доказать, является Я зафиксированный блок. Я зафиксированный блок – следствие бесполезного пробуждения. По Кодексу Наполеона (гражданский кодекс французов), вступившему в силу 21 марта 1804 года, муж мог требовать от жены развода за адюльтер, а мужская измена не могла быть достаточным основанием для развода, если только муж не брал с собой Я зафиксированный блок в дом. Наши современники не знают, не понимают, что такое адюльтер, но прекрасно знают, что такое Я зафиксированный блок. Я знаю вкус Я зафиксированный блок, но жевать нечего, а когда будет, что пожевать, боюсь Я зафиксированный блок не почувствовать. Я зафиксированный блок – пристегните самое дорогое. А вот «Колб йыннаворискифаз я» – это Я зафиксированный блок наоборот.</p>
        </div>
    </div>
    </body>
    </html>

    Почему не работает? Чего не хватает?
     
  9. AGENT131313

    AGENT131313 Забанен

    Регистр.:
    17 мар 2009
    Сообщения:
    282
    Симпатии:
    28
    Толи я чет непойму..толи хз...
    Вы же используете id="fixed" значит у вас в скрипте должно быть #fixed.
    Например. как в скрипте что вылаживал вам я выше
    <script type="text/javascript">
    $(function() {
    var offset = $("#fixed").offset();
    var topPadding = 15;
    $(window).scroll(function() {
    if ($(window).scrollTop() > offset.top) {
    $("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
    }
    else {$("#fixed").stop().animate({marginTop: 0});};});
    });
    </script>