Html fixed header height

CSS Fixed Sticky Header – The Right Way Without JavaScript

Learn how to make a header fixed sticky to the top and scroll the body content using CSS calc() function without JavaScript like the screenshot below.

HTML Markup

The simple HTML markup has a main element.

It has two children elements inside:

Add some style to the header and li which will be added dynamically inside the ul tag using JavaScript.

Note: You could add HTML content directly inside instead of using JavaScript…but I do not want to create a li element 30 times.

CSS

Add List Items Using JavaScript

Get a DOM reference to the ul element using its id list.

Loop through a few times so that we have enough content that will go beyond the height of the browser’s viewport.

Append li to the ul.

And the final output will look like this.

Make Header Fixed Using Calc()

At this stage, when you scroll vertically the header moves with the content.

To make the header fixed, make the ul content element to take the full height of the viewport minus the height of the header element.

Luckily, we can do dynamic simple calculations using CSS calc() functions without JavaScript.

To get the dynamic height, call the calc() function as a value of the height property inside the ul CSS rule.

Then, get the full height of the ul content element using 100vh which is one of the ways to make a div full screen vertically and horizontally.

Also, get the height of the header from the header CSS rule.

In this case 60px and subtract the height of the header from the height of the ul content element which takes the full height of the screen.

This will push the ul content down, sitting just beneath the header element. Also it takes the rest of browser’s viewport height.

At this stage, the content is overflowing, so enable scrolling by adding the overflow:scroll property to the ul content element.

Источник

Как сделать шапку сайта фиксированной и изменяющей размер

В этой статье я покажу, как сделать шапку сайта фиксированной и изменяющей размер при прокрутке. Приведенный вариант реализации может не работать в устаревших браузерах вроде IE5 или 6.

Реализация

Для начала нам нужна HTML-структура наподобие следующей:

Код CSS, приведенный ниже – это базовые стили заголовка.

.header < width: 100%; height: 150px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; background-color: #3b8dbd; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; >.header h1#logo < display: inline-block; height: 150px; float: left; margin-left: 50px; font-family: "Oswald", sans-serif; font-size: 60px; color: white; font-weight: 400; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; >.header nav < display: inline-block; float: right; margin-right: 50px; >.header nav a < line-height: 150px; margin-left: 20px; color: #9fdbfc; font-weight: 700; font-size: 18px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; >.header nav a:hover < color: white; >.header.smaller < height: 75px; >.header.smaller h1#logo < width: 150px; height: 75px; font-size: 30px; >.header.smallernav a

В CSS-коде, приведенном выше, последние три блока имеют класс “.smaller”. Это сделает шапку меньше при прокрутке вниз. Но чтобы добавить класс “.smaller”, потребуется код jQuery:

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

Чтобы сделать ее адаптивной, необходимо добавить несколько строк кода CSS:

@media all and (max-width: 660px) < .header h1#logo < display: block; float: none; margin: 0 auto; height: 100px; line-height: 100px; text-align: center; >.header nav < display: block; float: none; height: 50px; line-height: 50px; text-align: center; margin: 0 auto; >.header nav a < line-height: 50px; margin: 0 10px; >.header.smaller < height: 75px; >.header.smaller h1#logo < height: 40px; line-height: 40px; font-size: 30px; >.header.smallernav < height: 35px; line-height: 35px; >.header.smallernav a < line-height: 35px; >>

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

Если вам понравилась эта статься, поделитесь ей со своими друзьями!

Источник

Как создать фиксированный хедер с анимацией во время прокрутки страницы

От автора: в этом уроке мы узнаем, как создать шаблон, который сейчас часто встречается на сайтах: фиксированный хедер, который плавно сжимается при прокрутке страницы. Начнем со структуры, а затем при помощи CSS и обычного JS заставим всю эту конструкцию работать. В самом конце мы коротко пробежимся по тому, как можно оптимизировать код, а также обсудим проблемы, которые встречаются у этого шаблона на сенсорных устройствах.

Чтобы вы поняли, что мы сегодня будем создавать, посмотрите демо ниже (или полноэкранную версию):

HTML разметка

Начнем мы со следующей разметки – хедер с тегом nav внутри и другими элементами:

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

В элементе nav, который является частью хедера, содержатся еще три элемента: логотип, основное меню и кнопка плейсхолдер, по которой срабатывает адаптивное меню (на экранах уже 1061px). Обратите внимание: По клику на эту кнопку ничего не произойдет. Создание адаптивного меню не входит в тему урока.

Первичные стили CSS

Давайте взглянем на стили CSS и заставим нашу разметку двигаться:

Краткое объяснение самых важных правил:

элемент header имеет фиксированную позицию;

для позиционирования элемента nav используется flexbox;

логотипу заданы правила margin-top: 50px и margin-left: 50px, а также padding: 20px 30px;

главное меню расположено напротив логотипа, и ему заданы свойства margin-top: 50px и margin-right: 50px;

адаптивная кнопка скрыта и становится видима только, когда ширина окна меньше 1061px. Кроме того, заданы верхний и правый margin’ы в 10px;

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

С этими стилями хедер выглядит следующим образом:

Анимация хедера

Мы построили базовую структуру хедера. Теперь необходимо обсудить следующие шаги:

элемент main должен быть расположен прямо под хедером. Не забывайте, что у хедера задано свойство positioned: fixed, из-за чего он расположен сверху элемента main;

анимация к хедеру применяется во время прокрутки страницы вниз.

Чтобы решить первую задачу, к элементу main необходимо добавить свойство padding-top, значение которого должно быть равно высоте хедера. В нашем случае у нас нет точной фиксированной высоты хедера, поэтому для ее вычисления нам понадобится JS. После вычисления высоту уже можно добавлять соответствующий padding элементу main. Для решения второй задачи мы сделаем следующее:

вытягиваем количество пикселей, на которое был прокручен документ;

если число больше 150px, добавляем класс scroll к хедеру.

JavaScript

Ниже представлен необходимый JS код. Начнем мы с объявления парочки переменных, вычислим высоту хедера и добавим это значение в свойстве padding-top в элемент main:

Для этой демонстрации мы используем свойство offsetHeight, чтобы вытянуть высоту хедера. Не забывайте, что мы точно так же могли использовать метод getBoundingClientRect(). Стоит отметить, что данный метод может вернуть дробное значение. Теперь по поводу события прокрутки:

Для вычисления количества прокрученных в документе пикселей мы используем свойство pageYOffset объекта window. Данное свойство не работает в старых версиях IE (

Как только мы докручиваем до 150px, добавляются дополнительные CSS правила:

Мы делаем следующие изменения:

добавляем светло-серый box-shadow хедеру;

уменьшаем padding и font-size логотипа;

изменяем выравнивание флекс элементов вдоль оси;

удаляем margin у логотипа, меню и адаптивной кнопки.

Вышеописанный правила делает хедер таким:

Добавляем адаптивность

Как мы упоминали в предыдущем разделе, когда ширина окна становится меньше 1061px, мы прячем меню и показываем адаптивную кнопку (которая ничего не делает). Также вносятся дополнительные изменения в необходимые элементы. Ниже показан адаптивный хедер в первичном состоянии:

А тут показан хедер после анимации:

Вопросы производительности

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

В нашем примере код, отвечающий за анимацию хедера (т.е. callbackFunc), запускается по событию scroll. То есть код может вызываться сотни раз или даже больше. Такой подход может сильно повлиять на производительность, особенно когда в функции callbackFunc хранится много кода, который должен выполняться при прокрутке страницы вверх и винз. В нашем случае анимация простая, но представьте реальный сценарий, где мы хотим сделать более сложную анимацию. Например, изменить позицию элемента и т.д.

Что же можно сделать? Есть множество возможных решений, но сейчас давайте коротко обсудим одно из них. Необходимо добиться, чтобы наша функция выполнялась максимум один раз за 200 миллисекунд (значение произвольное). Для этого нам понадобится JS библиотека Lodash, в которой есть функция throttle.

Во-первых, необходимо подключить библиотеку (к счастью, есть возможность подключить только нужную функцию). Во-вторых, необходимо заменить строку:

Источник