Войти

Авторизация

Логин:
Пароль:
Забыли пароль?
Регистрация
Сайт пользователей Artisteer и Themler. Официальный торговый представитель.

Фиксированный верхний колонтитул при прокрутке

Как сделать фиксированным верхний колонтитул при прокрутке
Посетитель
Tokkata
Сообщений: 7
603 дня назад
Доброго времени суток форумчане!
Возможно тема была: Как сделать фиксированным верхний колонтитул при прокрутке?

Может есть какое то расширение или хак в коде?
Постоянный участник
Malover
Медаль
Сообщений: 576
2 дня назад
Попробовал на скорую руку, сделать фиксированную шапку. Не получилось, надо во многих местах изменения делать. Времени нет.

Если коротко надо:
1. Выбрать подходящий для этого макет страницы я брал такой:
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

2. В стилях зафиксировать шапку то есть в template.css строка примерно 420 для .art-header, в нем заменить position: relative; на position: fixed;

Дальше я не стал делать, но теоретически нужно:

3. Сделать отступ сверху на расстояние высоты шапки, так же в стилях, для меню и для самой страницы.
то есть в стили .art-nav и .art-layout-wrapper добавить top: 150px; (вместо 150 подобрать для меню и шапки свои, что бы смотрелось корректно.)

4. Если окажется что меню будет при прокрутке над шапкой изменить у него в .art-nav свойство z-index поставить методом проб от 1 до 100.

Как то так.

А вообще на сайте тем и реализаций зафиксировать что то много, посмотрите как в них фиксируют:

Скрытый текст виден только зарегистрированным пользователям

Скрытый текст виден только зарегистрированным пользователям

Скрытый текст виден только зарегистрированным пользователям
Редактировалось: 1 раз (Последний: 30 ноября 2015 в 20:23)
Посетитель
Tokkata
Сообщений: 7
603 дня назад
Спасибо за поддержку! но есть еще вопрос - как этот колонтитул поставить по середине и сделать по верх листа ?Добавлено спустя 1 минуту
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.
Постоянный участник
Malover
Медаль
Сообщений: 576
2 дня назад
Tokkata:
но есть еще вопрос - как этот колонтитул поставить по середине и сделать по верх листа ?

Добавьте туда же, куда и position: fixed; ширину и поправьте z-index:

Код PHP:
  1.  
  2. width: 800px; // добавить и 800 заменить значение на ширину вашего шаблона.
  3. z-index: 100; // 100 или больше, поставить столько, что бы стало над всеми
  4.  
Редактировалось: 1 раз (Последний: 30 ноября 2015 в 22:09)
Посетитель
Tokkata
Сообщений: 7
603 дня назад
как сделать, что бы лист начинался после колонтитула и меню? сейчас он начинается после колонтитула, а верх листа невидно т.к. меню его закрыло
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.
Постоянный участник
Степаныч
Медаль
Сообщений: 637
7 часов назад
Отступ листа, попробуйте два способа, какой лучше.

template.css строка примерно 420:

Код PHP:
  1.  
  2. .art-sheet {
  3. cursor: auto;
  4. margin: 0 auto;
  5. position: relative;
  6. width: 800px;
  7. z-index: auto !important;
  8. }
  9.  
в нем изменить margin: 0 auto; на margin: 120px auto 0 auto;
или добавить в правило top: 120px;

Tokkata, ИМХО все эти плавающие панели уменьшают обзор посетителям, если и использовать то узкое горизонтальное меню, что бы не так много отнимало места.
Редактировалось: 1 раз (Последний: 1 декабря 2015 в 10:50)
Постоянный участник
Malover
Медаль
Сообщений: 576
2 дня назад
Степаныч:
ИМХО все эти плавающие панели уменьшают обзор посетителям, если и использовать то узкое горизонтальное меню, что бы не так много отнимало места.

Сейчас многие делают. joke
Посетитель
Tokkata
Сообщений: 7
603 дня назад
Будьте добры!
На ПК все смотрится хорошо, но на планшете и мобильнике верхнее(зеленое) меню уходит под верхний колонтитул и его не видно - как это можно исправить ?
Постоянный участник
Malover
Медаль
Сообщений: 576
2 дня назад
Надо сделать почти тоже самое только в файле template.responsive.css он в основном отвечает за вид на мобильных:

Для header это будет наверное в этом куске:
Код PHP:
  1.  
  2. .responsive .art-header
  3. {
  4. width: auto !important;
  5. max-width: none !important;
  6. min-height: 100px !important;
  7. min-width: 0 !important;
  8. text-align: center;
  9. }
  10.  
  11. .default-responsive .art-header
  12. {
  13. height: auto;
  14. }
  15.  
  16. .default-responsive .art-header *
  17. {
  18. position: relative;
  19. text-align: center;
  20. -webkit-transform: none !important;
  21. -moz-transform: none !important;
  22. -o-transform: none !important;
  23. -ms-transform: none !important;
  24. transform: none !important;
  25. }
  26.  
  27.  
Скорее всего в последнем где position: relative; заменить на фиксированный.

Но здесь соглашусь со Степанычем, на мобильных экранах и так места мало, еще и закрывать часть не айс. smile
Посетитель
Tokkata
Сообщений: 7
603 дня назад
Простите! hoho все ровно пока меню находится под колонтитулом и его не видно
Постоянный участник
WaRRan
Медаль
Сообщений: 178
20 дней назад
Tokkata:
Простите! hoho все ровно пока меню находится под колонтитулом и его не видно

z-index регулирует что над чем должно быть, чем выше, тем выше слой:

Скрытый текст виден только зарегистрированным пользователям
Постоянный участник
Handi
Медаль
Сообщений: 720
1 день назад
z-index надо регулировать у обоих. У листа .art-sheet и у колонтитула .art-header. У листа он должен быть меньше. music
качественное продвижение и раскрутка сайтов в сеопульте
|
Перейти на форум:
Быстрый ответ
У вас нет прав, чтобы писать на форуме.