diventarecreative
  • 0
Новичок

Как создать фиксированный заголовок и прокручиваемую область содержимого

  • 0

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

Моя страница http://axiomwest.com/client-services/

Как я могу добиться фиксированной области заголовка и разрешить прокрутку только в области основного содержимого?

Share
  1. Ссылка отправляет меня на страницу режима обслуживания. Не вижу того, что мне нужно увидеть, чтобы помочь.

    • 0
  2. Хорошо, что вам нужно сделать здесь, это отделить заголовок в его собственную оболочку. Что я сделал, чтобы заставить это работать, так это закрыть блок #wrapper сразу после закрытия блока #header и запустить новый блок с тем же классом hfeed и новым идентификатором, отличным от оболочки.

    Должно выглядеть так:

    <div class="hfeed" id="wrapper">
        <div id="header">
            <div id="logo">...
            (stuff in here)
        </div><!-- #header -->
    </div>
    <div class="hfeed" id="wrapper-lower">
        <div id="main">
            <div id="container">...
            (so on, so forth)
    

    Теперь, если вы примените position:fixed к элементу #wrapper, вы получите желаемый эффект. Вам все равно нужно будет изменить способ работы графики, чтобы действительно продать эффект. Я мог бы предложить использовать.png, где все под красной линией галочки прозрачно. Размер файла будет намного больше, но если это единственное большое изображение, которое вы используете, все будет в порядке.

    Почти забыл! Вам также нужно будет применить верхний отступ к #wrapper-lower, чтобы протолкнуть его вниз за фиксированный элемент. Верхний отступ #wrapper-lower должен быть таким же, как общая высота #header.

    • 0

Оставить ответ

You must login to add an answer.