голоса 0
просмотры 590

Opencart 2 / OcStore 2 - как закрепить шапку сайта при прокрутке страницы?

есть лучший ответ
пользователь | категория: Интернет
есть лучший ответ пользователь | просмотры 590

3 Ответы

голоса 0
Лучший ответ

Opencart 2 / OcStore 2 - как закрепить шапку сайта при прокрутке страницы?

Существует множество способов того, как закрепить шапку сайта при прокрутке страницы. Можно использовать javascript, но я думаю проще испльзовать css. С его помощью можно легко зафиксировать шапку сайта (да и любой другой элемент).

Если вы хотите закрепить верхнюю панель (там где Личный кабинет / Мои закладки / Корзина покупок / Оформление заказа), в файле stylesheet.css после строк:

/* top */
#top {
    background-color: #EEEEEE;
    border-bottom: 1px solid #e2e2e2;
    padding: 4px 0px 3px 0;
    margin: 0 0 20px 0;
    min-height: 40px;

Добавьте:

   position: sticky; // закрепить
    z-index:200; // на передний план
    top: 0px; // позиция при прокручивании станицы
    margin-top: 1px; // отступ при верхнем положении
    width: 100%; // ширина

Если Вы хотите сделать тоже самое с шапкой, то вставьте эти строки в соответствующее место файла stylesheet.css

пользователь
выбрал пользователь
голоса 0

Закрепляем шапку сайта с помощью CSS

Для того, чтобы закрепить шапку сайта нужно в div вывода шапки прописать стиль:

style=”position: fixed; z-index: 9999; margin-bottom: 20px;”

CSS position: fixed;

пользователь
голоса 0

Как зафиксировать шапку сайта?

Существует несколько способов того, как закрепить шапку сайта при прокрутке страницы. Можно использовать javascript, а можно css и зафиксировать шапку сайта, как и любой элемент, можно им.

Сам метод фиксации элемента при прокрутке страницы достаточно простой. Чтобы зафиксировать шапку, нужно создать два блока.

  1. html структура:

<div id="Main">
 <div id="head">
 </div>
</div>

  1. Стили:

#Main {
  width:100%;
  height: 200 px;
  margin:0px auto;
  z-index:0;
}

#head {
  width:100%;
  height: 200 px;
  background: url(../img/head.jpg) no-repeat;
  position: fixed;
  z-index: 9999;
}

Шапка будет неподвижна при прокрутке и зафиксирована вверху экрана.

пользователь

Похожие вопросы

голоса 0
ответы 2
спросил пользователь GeFo 16 Март, 17 | категория: Интернет | просмотры 566
голоса 0
ответы 3
спросил пользователь Сергей 08 Ноя, 19 | категория: Интернет | просмотры 249
голоса 0
ответы 2
спросил пользователь GeFo 14 Май, 18 | категория: Интернет | просмотры 203
голоса +1
ответы 2
спросил пользователь GeFo 15 Март, 17 | категория: Интернет | просмотры 1.2k
голоса +1
ответы 10
спросил пользователь Сергей 02 Авг, 17 | категория: Товары и услуги | просмотры 166
голоса 0
ответы 5
спросил пользователь GeFo 27 Май, 17 | категория: Путешествия и туризм | просмотры 1.6k
голоса +3
ответы 5
спросил пользователь Алина 04 Янв, 17 | категория: Мода и стиль | просмотры 186
1,703 вопросов
ответы 4,278
17 комментариев
2,749 пользователей