Я экспериментировал с сайтом, над которым работаю. Мой клиент хочет, чтобы заголовок с навигацией и логотипом оставался нетронутым, чтобы посетители всегда имели возможность получить доступ к панели навигации во время прокрутки, чтобы прочитать содержимое страницы. Я добавил fixed в свою оболочку div, и это сохраняет фон статическим, но в этом дизайне фон также является частью заголовка.
Моя страница http://axiomwest.com/client-services/
Как я могу добиться фиксированной области заголовка и разрешить прокрутку только в области основного содержимого?
Ссылка отправляет меня на страницу режима обслуживания. Не вижу того, что мне нужно увидеть, чтобы помочь.
@Drew: Извините, забыл выключить. Теперь он доступен для просмотра.
Никогда не отключайте правый щелчок, мне все равно, что нужно клиентам, вы мешаете удобству использования. Это также затрудняет отладку с моей точки зрения. Я официально раздражен от этого проекта.
Я не могу победить! Дрю, ты знаешь пресловутого клиента из ада? Ну, это они. Просто один из их раздражающих запросов, и мне пришлось протестировать плагин для них. Пожалуйста, взгляните еще раз на статический заголовок, так как я отключил плагин против правой кнопки мыши. Я ценю ваше терпение.
Мы все должны объединиться против адского клиента, я с вами
Спасибо, Дрю. Я думал, что мне нужно будет немного изменить макет, но я просто не был уверен, что это самый разумный способ сделать это. Я проверю ваш метод выше и дам вам знать, как он работает!
Я заработал, отредактировав вашу страницу локально через firebug, оптимальная высота верхнего отступа для #wrapper-lower составляет 320 пикселей.
Это сработало! Еще раз спасибо Дрю. Я использую контактную форму 7 на этом сайте, и поля формы не работают так, как статический текст… они просто перемещаются вверх по заголовку при прокрутке. Я возьму таблицу стилей для CF7 и посмотрю, что из этого получится.
Хорошо, что вам нужно сделать здесь, это отделить заголовок в его собственную оболочку. Что я сделал, чтобы заставить это работать, так это закрыть блок #wrapper сразу после закрытия блока #header и запустить новый блок с тем же классом hfeed и новым идентификатором, отличным от оболочки.
Должно выглядеть так:
Теперь, если вы примените position:fixed к элементу #wrapper, вы получите желаемый эффект. Вам все равно нужно будет изменить способ работы графики, чтобы действительно продать эффект. Я мог бы предложить использовать.png, где все под красной линией галочки прозрачно. Размер файла будет намного больше, но если это единственное большое изображение, которое вы используете, все будет в порядке.
Почти забыл! Вам также нужно будет применить верхний отступ к #wrapper-lower, чтобы протолкнуть его вниз за фиксированный элемент. Верхний отступ #wrapper-lower должен быть таким же, как общая высота #header.