CSS или JQuery Исправлена ​​боковая панель в макете сайта - PullRequest
Новая
       24

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

3 голосов
/ 21 августа 2009

Мой сайт настроен с такой структурой контента 

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

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

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

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

Ответы [ 2 ]

11 голосов
/ 24 августа 2009

В конце концов, я выбрал 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>

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

2 голосов
/ 21 августа 2009

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

#content {
   overflow:auto;
}

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

...