Как сделать sticky header

CSS position: sticky — создание эффектов пролистывания с использованием липкого позиционирования

Дата публикации: 2018-09-28

От автора: липкие элементы преимущественно используются для удерживания чего-либо, отображаемого на экране во время прокрутки. Как же здорово, что мы можем и скрыть элементы так же!

Вот типичная (хм) ситуация:

Липкие элементы (CSS position sticky;) очень похожи на фиксированные (position: fixed;), поскольку они сохраняют свое положение на экране, даже когда пользователь прокручивается страницу вверх или вниз. В чем разница? Липкий элемент остается ограниченным родительским контейнером, в котором он находится. Сравните пример выше с этим, в котором используется та же концепция, но через фиксированный элемент:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Предположим, мы хотим создать эффект, когда элементы пролистываются или скрываются при прокрутке — вроде как эффект параллакса. Например, заголовок и футер, который скрываются и показываются при прокрутке:

И угадайте что? Мы можем сделать это с помощью липких элементов!

Как мы это сделали? Рад, что вы спросили. Давайте выясним.

Настройка HTML

В нашем примере есть три липких элемента:

Первый — заголовок категории, который уходит под тело статьи, когда достигает вершины экрана.

Второй — название статьи, и оно остается видимым в верхней части экрана, а контент статьи исчезает под ним при прокрутке (что является типичным поведением липкого элемента).

Третий элемент — футер, который уходит под тело статьи и появляется, когда статья прокручивается выше определенного порога.

Давайте посмотрим, как это делается. Вот HTML, с которым мы работаем … в основном два блока article:

Липкий CSS

Я не настраиваю значительно липкие элементы, только задаю некоторые стили. Они и так уже делают то, что им нужно делать: закрепляются на экране. Осталось только создать перекрытие и некоторое пространство между краем страницы и прокручиваемыми элементами.

Вероятно, есть огромное количество способов, с помощью которых мы можем создать перекрытие, с помощью которого будут скрываться элементы — я выбрал фоновое изображение.

К статье применяется линейный градиент фона, который идет сверху вниз, начиная с 50px, где фон полностью прозрачный, затем он резко переходит в цветной и на 50px снизу снова прозрачный. Это работа для calc? Таким образом у нас есть две прозрачные полосы размером 50 пикселей, одна сверху и одна внизу, с равной высотой, соответствующей высоте заголовка категории и футера.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

Уменьшающаяся при прокрутке «шапка» страницы без JavaScript

Представьте себе красивую и массивную «шапку» (header) веб-страницы с множеством отступов сверху и снизу от содержимого. Когда страница прокручивается (скроллится) вниз, «шапка» сжимается, уменьшая отступы и содержимое, чтобы оставить больше места на экране для остального контента.

Обычно, чтобы добавить такой эффект уменьшения шапки при скролле страницы, используется немного JavaScript и CSS, но с появлением position: sticky то же самое можно сделать, используя только CSS.

Начинаем, как обычно, с HTML-разметки. Здесь нет ничего сложного: с одним потомком

Затем в CSS, объявим высоту для (120 пикселей) и настроим его как flex-контейнер, который выравнивает содержимое по центру. Затем сделаем его «липким» (sticky).

Все остальные элементы «шапки»: логотип и навигация — размещаются во внутреннем контейнере. В некотором смысле этот контейнер и является «шапкой», тогда как единственная функция родительского HTML-элемента — обозначить её размеры, чтобы было что сокращать.

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

Таким образом можно приклеить к верхней части окна любой элемент. Например, важное объявление.

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

Еще одно ограничение? Не уменьшается логотип. Это, пожалуй, самый большой недостаток, поскольку логотипы часто являются самым большим потребителем свободного места. Наверное, когда-нибудь получится применять стили, основанные на липкости элемента…

Источник

Как сделать прикреплённую и анимированную шапку сайта на CSS3 и JQuery

Я думаю, что многие из Вас уже заметили, что сейчас в тенденцию входят всё больше липких элементов дизайна, которые остаются на виду при прокрутке страницы пользователем. Как по моему это очень удобно, особенно если это навигация сайта. Вот именно такой пример мы сегодня и будем делать. Мы узнаем как сделать анимированную шапку сайта на JQuery и CSS3 с анимацией.

Как обычно это, оказывается, делается в минимум строк кода и очень просто, и в то же время очень эффективно. Ну а теперь давайте приступим к уроку.

Но для начала хочется сказать огромное спасибо http://www.webdesignerdepot.com ну а теперь давайте точно начнём.

Демо Ι Скачать

HTML код очень и очень простой, нам просто нужно задать теги для шапки сайта, и далее между ними написать содержимое сайта:

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

Код jQuery

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

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

Важно отметить, что использование jQuery в данном примере не очень хорошая затея, так как если в браузере будет отключено использование скриптов, тогда шапка сайта будет просто фиксированная и всё.

CSS код будет состоять из 2х частей. Первый код будет отвечать за стандартную шапку сайта, которая находится в положении по умолчанию. Второй код будет отвечать за отображение шапки, когда пользователь будет прокручивать страницу. Давайте посмотрим как выглядит код по умолчанию:

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

Это самый простой пример, с помощью которого Вы должны понять суть работы. Всё зависит от конструкции Вашего сайта.

Ну а сейчас давайте добавим немного анимации нашему переходу с помощью transition. Вот код:

Демо Ι Скачать

Заключение

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

Источник

Таблица с липкой шапкой

Инструкция как сделать липкую шапку таблицы без использования JavaScript и без jQuery. Фиксированные заголовки таблицы сделанные на чистом CSS.

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

На самом деле эта типовая задача решается при помощи всего лишь трёх строчек css-кода. И это в буквальном смысле.

Вот посмотрите такое DEMO таблицы:

Ну как вам такое? Правда круто?

Эта таблица имеет самый обычный html:

Так же у меня в этом блоке стилей прописаны фон шапки и цвет текста. Это для того чтобы стилизовать шапку таблицы:

Источник

Как создать sticky menu с помощью CSS или JQuery

Всем привет! Sticke меню, или прилипающее меню, имеет устойчивую популярность в современном сайтостроении. Это такой вид меню, когда оно прилипает к определенной позиции и остается видимым даже при прокрутке страницы, тем самым обеспечивая постоянный доступ к нему. Существует множество JQuery плагинов для создания липкого меню. Здесь я расскажу, как самостоятельно написать такое меню с помощью JQuery и CSS.

Способ на JQuery

В этой главе мы рассмотрим, как с помощью JQuery манипулировать DOM, а также добавить класс к меню, чтобы зафиксировать его при прохождении определенной точки.

1. Разметка

В нашей разметке мы создадим хедер, в котором будут содержаться основные блоки: блок с классом demo-nav и следом за ним блок с классом main-nav, в котором содержатся ссылки нашего меню. Затем необходимо обернуть наш контент блоком с классом content.

2. CSS

Теперь напишем базовые стили для основных элементов, таких как body, header, хедер самого меню и т. д.

Теперь давайте взглянем на наш блок хедер меню. Необходимо задать относительное позиционирование для панели навигации. Установим высоту в 60px и ширину в 100%. Также добавим нижнюю границу шириной в 1px и стили для ссылок с произвольными внутренними отступами.

Затем мы создадим специальный класс stickytop с фиксированным позиционированием. Это потребуется в дальнейшем в нашем коде JQuery.

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

3. Скрипт

Чтобы добиться эффекта плавающего прилипающего меню мы будем использовать самописную функцию, которая будет срабатывать в определенной точке на экране.

Обратите внимание: мы используем библиотеку JQuery, не забудьте подключить ее в шапке с помощью Google Hosted Libraries или самостоятельно, добавив файл jQuery.js в соответствующую директорию.

Попробуйте добавить код ниже прямо перед закрывающим тегом body, не забудьте обернуть код в теги script.

Способ на CSS

Теперь, когда мы знаем, как создать прилипающее меню с помощью JQuery, давайте посмотрим, как сделать такое же меню, но с помощью CSS.

1. Разметка

Разметка точно такая же, как и в примере с JQuery, однако мы будем менять позицию хедера и меню с помощью CSS.

Источник