CSS или JQuery Фиксированная боковая панель в макете сайта

Мой веб-сайт настроен с такой структурой контента

<body>
    <div id="header></div>
    <div id="contentwrapper">
        <div id="content>
        ...
        </div>
        <div id="sidebar">
        ...
        </div>
    </div>
    <div id="footer"></div>
</body>

Я пытаюсь заставить свой веб-сайт вести себя так, чтобы боковая панель оставалась в том же месте, что и в моем статическом макете. Что он находится справа от столбца «Содержимое», что он ниже div заголовка и выше div нижнего колонтитула, и что, если они сжимают окно по горизонтали, оно не перемещается поверх столбца контента.

Я пробовал google generic css с фиксированной позицией и т. Д. И не смог найти ничего, что действительно работало бы со мной, поэтому я спрашиваю здесь. Я ищу, как справиться с этим с помощью css или javascript, если он идет по маршруту javascript, я бы предпочел JQuery в качестве основы.

Редактировать Мне не нужно поддерживать устаревшие браузеры, но меня не волнует, полностью ли он работает в ie6, если он не портит мою страницу и приемлемо деградирует (например, он не сидит на изнаночной стороне страницы или над моим заголовком или содержимым)


layout jquery css fixed
person Chris Marisic    schedule 21.08.2009    source источник

Ответы (2)


arrow_upward
11
arrow_downward

В конце концов, я выбрал решение javascript, с которого я начал до того, как пришел и разместил здесь:

<script type="text/javascript">
    $(window).scroll(function() {
        $('#sidebarPage1').css('top', $(this).scrollTop() + "px");
    });
</script>

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

Сегодня я еще немного погуглил и наткнулся на этот пост: Верхнее плавающее окно сообщения с использованием jQuery. Что привело меня сюда

<script type="text/javascript">
    $(window).scroll(function() {
        $('#sidebarPage1').animate({ top: $(window).scrollTop() + "px" }, 
            { queue: false, duration: 500, easing: 'easeInOutSine' });
    });
</script>

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

person Chris Marisic    schedule 24.08.2009

arrow_upward
2
arrow_downward

Попробуйте прокручивать содержимое div вместе с содержимым, а не расширять его по высоте и создавать полосы прокрутки для всей страницы. Таким образом, ваш макет останется неизменным независимо от размера содержимого, а в разделе содержимого появятся полосы прокрутки.

#content {
   overflow:auto;
}

Это должно сработать для тебя.

person Zoidberg    schedule 21.08.2009
comment
Это вариант, который я не рассматривал, я бы предпочел, чтобы полоса прокрутки находилась на краю страницы, как обычно, но это всегда возможный запасной вариант в худшем случае. - person Chris Marisic; 21.08.2009
comment
Вы всегда можете немного поиграть с областью контента. Имейте div внутри контента, который ограничивает ширину. Затем прокрутите div содержимого до края страницы, а затем абсолютно расположите боковую панель над пустой областью, которую вы зарезервировали в поле прокрутки, ограничив ширину содержимого. Тогда ваша боковая панель может появиться рядом с содержимым, но с правильной стороны полосы прокрутки. - person Zoidberg; 21.08.2009
comment
Контент и мой сайт представляют собой макет фиксированной ширины с использованием чертежей, ваша идея звучит очень жизнеспособно, если никто другой не предлагает ничего большего. - person Chris Marisic; 21.08.2009
comment
Да, это довольно уродливо... без сомнения... но это css... обычно так, LOL - person Zoidberg; 21.08.2009