Кричащая шапка на странице таблоида

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

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

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

Ι

HTML

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

Прикреплённая шапка сайта

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

Код jQuery

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

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

А вот и сам код:

$(window).scroll(function() { if ($(this).scrollTop() > 1){ $("header").addClass("sticky"); } else{ $("header").removeClass("sticky"); } });

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

CSS

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

Header{ position: fixed; width: 100%; text-align: center; font-size: 72px; line-height: 108px; height: 108px; background: #335C7D; color: #fff; font-family: "PT Sans", sans-serif; }

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

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

Header.sticky { font-size: 24px; line-height: 48px; height: 48px; background: #efc47D; text-align: left; padding-left: 20px; }

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

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

Transition: all 0.4s ease;

Ι

Заключение

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

По Вашему запросу фиксированный header найдено 256 результатов

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

Соответствие: 7
Фиксированная навигационная панель часто встречается на различных ресурсах. Такой функционал достаточно легко воспроизвести на WordPress. Фиксированная панель поможет вашим читателям быстро перейти к интересному разделу из любой точки на странице.

Соответствие: 7
В сегодняшнем уроке мы создадим фиксированную панель навигации для сайта или блога.

Соответствие: 6
В сегодняшнем уроке мы создадим полупрозрачный фиксированный блок, который остается всегда на виду.

Соответствие: 6
Фиксированная панель для сообщений является отличным инструментом для привлечения внимания пользователя вне зависимости от места ее размещения на сайте. Такая панель великолепно справляется с задачей анонсирования события, продукта, бонусов и прочих приятных новостей. Для WordPress существует много плагинов, которые легко использовать и настраивать.

Соответствие: 6
Сегодня разрешение экранов варьирует от 320px (iPhone) до 2560px (большой монитор) или еще больше. Теперь пользователи пользуются интернетом не только через свой PC, но и при помощи мобильных устройств, таких как iPad или Playbook. Таким образом, традиционный подход к фиксированным размерам страницы больше не является дееспособным. Веб-дизайн должен быть адаптирован под всё. Расположение элементов должно корректироваться автоматически, чтобы соответствовать разрешению дисплея. В этом уроке мы покажем вам, как создать кроссбраузерный дизайн, работая с HTML5 и CSS3 медиа запросами.

Соответствие: 4
В данном уроке мы сделаем навигационную панель, которая остается на своем месте при прокрутке содержания страницы. И, конечно же, применим пару хитростей для улучшения внешнего вида и функционала.

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

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

Один из них как зафиксировать шапку сайта ? Я тут же решил исправить положение и написать статью, так как тема актуальная, и есть вопросы в данной области.

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

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

Фиксация шапки при прокрутке страницы

Для того, чтобы зафиксировать шапку, придется создать два блока. Один — для того, чтобы была возможность центрировать шапку. А в нем дочерний, который и будет фиксироваться. Начнем…

Вот такая простая html структура! Теперь добавим стили!

#headerMain { width:920px; height: 195px; margin:0px auto; z-index:0; } #header { width:920px; height: 195px; background: url(../img/bg-header.jpg) no-repeat; position: fixed; z-index: 9999; }

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

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

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

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

Ну что же, давайте начнем!

Фиксируем позицию шапки и сайдбара на веб-странице

1. Первое, что потребуется сделать – это создать html-файл нашей страницы. Здесь я создам очень простую структуру страницы. У нее будет шапка с тремя заголовками, помещенная в тег header ; сайдбар со ссылками и надписью, помещенный в тег aside ; сами ссылки навигации будут расположены в теге nav ; контент страницы в теге article и футер в теге footer .

Как видите, я в примере использую html5-теги. Это не принципиально, и если Вы по какой-то причине не хотите их использовать, то можете спокойно использовать теги div , при этом присваивая им соответствующие идентификаторы. Это никоем образом не повлияет на фиксацию элементов, просто мне в данном случае удобнее использовать именно html5.

Если будете использовать теги div с идентификаторами, то тогда не забудьте сделать соответствующие изменения в файле таблицы стилей (когда мы до нее дойдем). Например, если Вы используете вместо тега header , тег div id=”header” , то и в таблице стилей Вы будете прописывать свойства для #header{…стили…} , а не для header{…стили…} .

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

Итак, вот содержимое html-файла с комментариями:

Фиксируем элементы на странице

Сайт с фиксированным Хедером

Эта шапка всегда останется здесь...

Сколько бы Вы не скролили!

Сайдбар нашего сайта

Внимание! Этот сайдбар тоже останется на месте... ведь мы его зафиксировали

Здесь я специально помещу побольше контента, чтобы Вы могли поскролить!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at sem nec nisl ultricies dignissim quis a velit. Morbi volutpat, dolor nec scelerisque eleifend, ligula leo adipiscing ligula, id euismod nisi turpis in diam. Nam purus diam, sagittis volutpat vehicula ac, adipiscing ac urna. Aliquam rutrum dignissim accumsan. Donec pulvinar sem vitae dolor sodales lobortis eget in metus. Suspendisse ac augue at mi lacinia commodo eget interdum diam. Praesent felis erat, mollis nec est quis, malesuada congue felis. Etiam condimentum tincidunt tortor, at ullamcorper enim cursus sed. Quisque vehicula eros sit amet leo feugiat, in rutrum diam vulputate. Praesent sit amet metus sodales, aliquam libero eget, sagittis ante. Nulla vestibulum felis id bibendum accumsan.

In iaculis arcu in sollicitudin pharetra. Nulla facilisi. Proin diam neque, viverra pretium mauris sit amet, placerat viverra orci. Integer suscipit congue odio, id egestas ipsum ultrices vel. Donec porttitor convallis adipiscing. Duis sollicitudin libero id sollicitudin mattis. Vestibulum pellentesque eros dui, in suscipit arcu elementum non. Integer sagittis nec risus ac suscipit.

Aenean a nunc id nunc ornare varius. Donec volutpat nisi et metus pulvinar pellentesque. Etiam porta mauris nec consectetur sagittis. Nunc ligula risus, sollicitudin at lacus eu, sodales vehicula quam. Suspendisse venenatis sapien sed rutrum laoreet. Suspendisse facilisis risus a augue facilisis scelerisque. Pellentesque tristique tellus ac bibendum rutrum. Etiam nulla urna, molestie id bibendum sodales, rutrum nec sapien. Nulla facilisi. Praesent ut enim erat. Phasellus ultrices leo id dui condimentum, et pharetra magna lacinia. Nulla sit amet sagittis tortor.

Vivamus id neque magna. Phasellus suscipit orci quis tortor accumsan, vitae vestibulum leo ultrices. Donec viverra lorem vel purus vestibulum suscipit. Sed congue erat tincidunt nibh ultrices tempor. In hac habitasse platea dictumst. Nam non pellentesque dolor. Phasellus elementum lobortis orci at posuere. Ut eget felis accumsan, sollicitudin ante quis, venenatis felis. Ut nec mi ornare, ultricies orci vel, pharetra odio. Mauris ultrices felis quis nulla ornare, volutpat facilisis libero molestie. Ut sodales pellentesque arcu. Ut commodo ipsum ut hendrerit semper. Ut laoreet massa risus, quis facilisis ligula ullamcorper at. Nullam nec velit in sem semper ornare.

Fusce a dictum leo, ut sagittis mi. Curabitur tempus elementum lobortis. Duis ultricies tincidunt enim, in porta turpis condimentum pellentesque. Nulla augue libero, accumsan nec imperdiet ut, hendrerit at erat. In hac habitasse platea dictumst. Suspendisse ullamcorper venenatis est non pulvinar. Pellentesque nec placerat elit. Maecenas sit amet mi enim. In ut velit nec leo sagittis vehicula nec a mi. Suspendisse ut vehicula arcu, vitae dictum magna. Maecenas odio ante, luctus nec hendrerit et, pellentesque a mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc id condimentum eros. Nulla lobortis congue libero, eget tincidunt dolor venenatis in. Nunc ut auctor orci.

Футер я не фиксировала, но я думаю Вы уже поняли, как это можно сделать!

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

Итак, создаем css-файл с именем «fix.css» (можете дать и другое имя, но тогда не забудьте его поменять в атрибуте href тега link, который подключает файл таблицы стилей) и сохраняем в том же каталоге, что и наш html-файл.

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

Давайте займемся стилями и расставим все по своим местам.

Для начала я пропишу правило, чтобы все мои html5-элементы отображались как блочные (это решение для старых браузеров, которые не поддерживают данные элементы. Если бы не используете html5-теги, то можете не писать эту строчку). Также задам правило для тега body : мы зададим ему ширину, выравнивание по центру, рамку и цвет фона.

article,aside,footer,header,nav{display:block;} body{width:980px; margin:0 auto; border:1px solid #333; background:#ffdfbf;}

Теперь страница должна выглядеть вот так.

Страницу мы оцентровали, теперь давайте перейдем к стилям самой шапки.

Для того чтобы сделать нашу шапку фиксированной нам нужно задать для нее высоту, ширину и прописать position:fixed . Ширина нам в данном случае нужна такая же, как и ширина для тега body , то есть 980px, а высоту я взяла равную значению 300px.

Теперь поговорим о свойстве position . Когда для position задано значение fixed , то элемент фиксируется на определенном месте страницы. Также при значении position:fixed мы можем регулировать расположение элемента при помощи таких свойств, как top, right, bottom и left (но в случае с шапкой нам это не понадобится). Элемент с таким позиционированием привязывается к координатам окна и при прокрутке страницы остается на месте.

Также я придам нашей шапке цвет, рамку и выровняю текст, находящийся в ней по центру.

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

Добавьте этот код в Ваш css-файл:

header{height:300px; width:980px; border-bottom:1px solid #333; background:#ECB035; text-align:center; position:fixed;} header h1,header h2, header h3, article p, footer p, aside p{ font-family:Arial, Helvetica, sans-serif; color:#336;} header h1{margin-top:0px; padding-top:50px;}

Если мы посмотрим на нашу страницу сейчас, то увидим следующее.

3. Шапка зафиксировалась. Вы можете промотать страницу вниз и убедиться в том, что она не движется.

Но, как Вы уже, наверное, заметили, часть нашего контента переместилась под шапку – так и должно быть, это особенность такого позиционирования. Скоро мы все расставим на свои места.

А пока давайте займемся стилями нашего сайдбара, который мы тоже собрались зафиксировать.

Нам нужно также определить для сайдбара ширину, задать ему фиксированное позиционирование, а также здесь мы воспользуемся свойством top , так как нам необходимо подкорректировать позицию блока сайдбара и сместить его под шапку (иначе он так и останется за шапкой). Я взяла для top значение 330px (300px – это высота нашей шапки и + еще 30 пикселей, чтобы шапка и сайдбар не были прилеплены друг к другу).

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

Добавьте вот этот код в Ваш файл таблицы стилей.

aside{position:fixed; width:200px; background:#99C; top:330px; border:1px dashed #333;} aside h2{font-family:Arial, Helvetica, sans-serif; font-size:16px; padding:10px;} aside p{padding-left:30px; font-size:14px; padding-right:10px;} aside li{list-style-type:none; font-family:Arial, Helvetica, sans-serif;} aside a{text-decoration:none; color:#FFF;}

И вот, что у нас получится.

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

Это очень просто исправить, ведь мы знаем высоту нашей шапки и ширину сайдбара, а также ширину страницы. Ширина страницы равна 980px, а ширина сайдбара 200. Следовательно, мы можем задать для блока с контентом ширину равную 700px и сделать отступ от левого края 230 px (30 px чтобы блок с контентом не «прилипал» к сайдбару). А зная, что высота шапки равна 300px, мы можем задать и отступ сверху в 300px (здесь мы не берем больше, потому что заголовок в начале статьи уже автоматически имеет отступ сверху).

А также зададим простые стили для футера (только для того, чтобы определить его внешний вид).

Добавьте последний фрагмент кода в свой файл таблицы стилей и посмотрите результат.

article{width:700px; padding-top:300px; padding-left:230px;} footer{text-align:center; width:980px; height:30px; background:#ECB035; margin-top:30px;}

Теперь можно скролить и скролить, а Ваша шапка и сайдбар всегда будут перед глазами.

На этом буду заканчивать. Исходники файлов Вы, как всегда, можете найти в Исходниках к уроку, а посмотреть эту страницу в браузере, можете нажав на кнопку «Демо» в начале урока.

Надеюсь урок был Вам полезен! Жду Ваших отзывов! Делитесь уроком с друзьями при помощи кнопок социальных сетей (буду очень признательна).

А также подписывайтесь на обновление блога, если Вы на него еще не подписаны. Дальше будет еще интереснее.

Успехов Вам, друзья, Хорошего Весеннего настроения и Удачных проектов!

С Вами была Анна Котельникова. До встречи!