Липкая боковая панель с изменяющимся по высоте заголовком?

Я пытаюсь чего-то добиться и не могу заставить его работать с существующими плагинами jQuery. Я пытаюсь добиться следующего:

У меня есть боковая панель примерно в 200 пикселях сверху при открытии веб-сайта. Выше находится мой заголовок, а под заголовком — меню (которое прилипает, когда достигает верхней части меню).

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

Чтобы было немного понятнее, вот простой пример HTML:

    <div class="header"></div>
    <div class="menu">always sticky through a jQuery sticky plugin</div>
    <div class="wrapper">
        <div class="sidebar">the part that SHOULD be sticky</div>
        <div class="content">the content that SHOULD scroll</div>
    </div>

Очевидно, что .sidebar и .content находятся рядом друг с другом.

Я думаю, что забыл действительно простое решение, но я не могу понять его.


sidebar jquery sticky
person user2424339    schedule 27.05.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Думаю, я уже делал то, о чем ты говоришь. Это то, что вы хотите сделать?

http://dropthebit.com/demos/stickyfloat/stickyfloat.html

Похоже, код теперь находится по адресу: https://gist.github.com/chaupt/728487.

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

Редактировать:

Хорошо, кажется, я понимаю, что вы имеете в виду. Попробуй это:

CSS:

    #header {background-color:#0000ff; color:#fff; height:50px; text-align:center; width:100%; z-index:10; }

    #wrapper {margin:0; padding:0; position:relative; z-index:1; }

    #menu {background-color:#000000; clear:both; color:#fff; height:25px; padding:5px; position:relative; width:100%; z-index:10; }

    #sidebar {background-color:#ff0000; color:#fff; float:left; margin:35px 0 0 0; position:relative; width:6em; }

    #content {background-color:#ff00ff; color:#fff; margin:0 0 0 6em; padding:35px 0 0 .5em; }

    p {margin:0 0 .5em  0; }

HTML:

<div id="header">Header</div>
<div id="wrapper">
    <div id="menu">Menu</div>
    <div id="sidebar">
        <ul>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
        </ul>
    </div>
    <div id="content">
        <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
        <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</p>
        </p>
    </div>
</div>

Затем добавьте файл stickyFloat.js из расположенного выше gisthub и добавьте:

<script type="text/javascript">
    $(document).ready(function() {
        $("#menu").stickyfloat({ duration: 400 });
        $("#sidebar").stickyfloat({ duration: 400 });
    });
</script>

Я думаю, это то, о чем вы говорите: http://jsfiddle.net/qVwTY/2/

Верхнее меню прикрепляется к верхней части окна, а боковая панель — к нижней. Я не проверял его во всех браузерах, которые у меня есть, но он работает в последних версиях Firefox и Chrome.

Надеюсь это поможет.

person JMurky    schedule 27.05.2013
comment
Не совсем, эта боковая панель прикрепляется к верхней части страницы, в то время как моя боковая панель должна прикрепляться к верхней части МЕНЮ, которое ТАКЖЕ прикрепляется к верхней части. Спасибо за ответ. - person user2424339; 27.05.2013
comment
Таким образом, ваше верхнее меню всегда будет иметь фиксированное положение в верхней части окна, и вы хотите, чтобы боковое меню прикреплялось к нижней части этого верхнего меню, когда окно прокручивается и они соприкасаются друг с другом? Надеюсь, это не начинает звучать как старомодный аббат/костелло... - person JMurky; 27.05.2013
comment
Потому что, если это так, этот плагин должен уметь это делать; вам, вероятно, просто нужно добавить верхнее поле к липкой стартовой позиции. Я не думаю, что это будет слишком ужасно сложно. Я попробую позже сегодня, если это действительно то, с чем у вас проблемы, и никто другой вам не помог. - person JMurky; 27.05.2013
comment
Да, это действительно то, чего я пытаюсь достичь. По какой-то причине я не смог заставить эту работу работать, я полагаю, что использовал тот же код, который вы мне дали раньше. - person user2424339; 27.05.2013
comment
Спасибо, это было все, что мне было нужно! - person user2424339; 29.05.2013