Как сделать прокрутку страниц фиксированной


Как сделать прокрутку страниц фиксированной

Как сделать прокрутку страниц фиксированной

Как сделать прокрутку страниц фиксированной



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

В посте рассмотрю два вопроса:

  • как фиксировать меню при прокрутке страницы, когда блок навигации «прижимается» к верху экрана (простое решение на css и с jquery).
  • плюс заодно поговорим о прокрутке до якоря с фиксированным меню, которая не совсем корректно работает без дополнительных хаков.

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

Фиксированное меню на CSS + HTML

В общем случае при создании простого горизонтального фиксированного меню для сайта вам нужно использовать CSS свойства position:fixed и top:0. Также основному блоку контента придется задать верхний отступ margin-top.

Итак, возьмем простую структуру HTML страницы:

<div class="menu"> <a href="#main">Главная</a> <a href="#about">О нас</a> <a href="#contacts">Контакты</a> </div> <div class="main"> <p>Какой-то текст для примера.</p> </div>

<div class="menu"> <a href="#main">Главная</a> <a href="#about">О нас</a> <a href="#contacts">Контакты</a> </div> <div class="main"> <p>Какой-то текст для примера.</p> </div>

В файл стилей CSS добавляете:

.menu { overflow: hidden; background-color: #999; position: fixed; top: 0; width: 100%; } .menu a { float: left; display: block; color: #000; padding: 15px 15px; text-decoration: none; } .content { font-style: italic; width: 40%; margin-top: 60px; margin-left: 10px; }

.menu { overflow: hidden; background-color: #999; position: fixed; top: 0; width: 100%; } .menu a { float: left; display: block; color: #000; padding: 15px 15px; text-decoration: none; } .content { font-style: italic; width: 40%; margin-top: 60px; margin-left: 10px; }

В результате получится такая картинка:

Создание фиксированного меню на CSS

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

Основные детали кода выше, как я уже говорил, это  position:fixed, top:0 и margin-top: 60px. Верхний отступ может быть другим, если высота меню у вас меньше/больше.

Кстати, если требуется зафиксировать меню внизу страницы, заменяете код на:

. menu { position: fixed; bottom: 0; width: 100%; }

. menu { position: fixed; bottom: 0; width: 100%; }

Все то же самое, только вместо top указывается bottom:0. Единственное, нужно будет погуглить как правильно сделать отступ контенту снизу чтобы он тот скрывался за плашкой меню. Решение с margin-bottom:30px; почему-то не сработало.

Фиксированное меню с jQuery и CSS

Второй пример чуть более сложный — с применением библиотеки jQuery. Она встречается на многих сайтах, плюс в большинстве и других CMS подключена изначально. Из Javascript функций здесь используется всего 2, поэтому данное решение можно считать достаточно легким по сравнению с некоторыми другими из интернета. Англоязычный исходник найдете , а вот что в итоге должно получиться:

Фиксированное меню

Алгоритм внедрения данного фиксированного меню с jQuery состоит из трех шагов. Первым делом добавляем HTML код:

<div class="nav-container"> <div class="nav"> <ul> <li><a href="">Home</a></li> <li><a href="">CSS</a></li> <li><a href="">PHP</a></li> <li><a href="">SEO</a></li> <li><a href="">jQuery</a></li> <li><a href="">Wordpress</a></li> <li><a href="">Services</a></li> </ul> <div class="clear"></div> /clear floating div/ </div> </div>

<div class="nav-container"> <div class="nav"> <ul> <li><a href="">Home</a></li> <li><a href="">CSS</a></li> <li><a href="">PHP</a></li> <li><a href="">SEO</a></li> <li><a href="">jQuery</a></li> <li><a href="">Wordpress</a></li> <li><a href="">Services</a></li> </ul> <div class="clear"></div> /clear floating div/ </div> </div>

Если вы хотите внедрить данный метод на уже готовое собственное меню, тут 2 пути: либо в CSS и JS ниже подставляете свои стили, либо подгоняете имеющийся HTML под вариант сверху.

В стилях размещаете следующие строки:

.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;} .f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} .nav { height: 42px;} .nav ul { list-style: none; } .nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;} .nav ul li:first-child{ padding-left: 0;} .nav ul li a { } .nav ul li a:hover{ text-decoration: underline;}

.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;} .f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} .nav { height: 42px;} .nav ul { list-style: none; } .nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;} .nav ul li:first-child{ padding-left: 0;} .nav ul li a { } .nav ul li a:hover{ text-decoration: underline;}

Кроме непосредственно фиксации меню при прокрутке есть CSS для размещение ссылок в одну строку.

jQuery("document").ready(function($){ var nav = $('.nav-container'); $(window).scroll(function () { if ($(this).scrollTop() > 136) { nav.addClass("f-nav"); } else { nav.removeClass("f-nav"); } }); });

jQuery("document").ready(function($){ var nav = $('.nav-container'); $(window).scroll(function () { if ($(this).scrollTop() > 136) { nav.addClass("f-nav"); } else { nav.removeClass("f-nav"); } }); });

Логика работы функций следующая — когда пользователь находится или прокручивает страницу ниже 136 пикселей сверху, то для меню добавляется класс f-nav, а в нем прописаны знакомые нам position:fixed и top:0.

Значение в 136 пикселей можно менять в зависимости от вашего дизайна. Кроме того, если вы интегрируете данный пример в свое готовое горизонтальное фиксированное меню на сайте, то указывайте соответствующие значения классов в JS и CSS. Если у вас возникли какие-то нюансы с реализацией кода, загляните в комментарии к оригинальной статье — там есть парочка подсказок.

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

Прокрутка до якоря с фиксированным меню

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

Данная ситуация чаще всего возникает в . На скриншоте проблема заметна более наглядно:

Создаем якорь с отступом

На StackOverflow найдено два решения задачи, которые отличаются лишь CSS.

Чтобы создать якорь с отступом первым делом добавим ему определенный стиль, например, anchor:

<h1><a class="anchor" name="linktext">Some text</a></h1>

<h1><a class="anchor" name="linktext">Some text</a></h1>

Далее для него в стилях прописываете:

.anchor{ display:block; height:55px; margin-top:-55px; visibility:hidden; }

.anchor{ display:block; height:55px; margin-top:-55px; visibility:hidden; }

Здесь 55 пикселей — высота меню + отступ, которые нужны чтобы текст контента был виден. Указывайте значения, подходящие вашему сайту. В работе я применял именно этот вариант.

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

.anchor { padding-top: 90px; }

.anchor { padding-top: 90px; }

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

Если есть вопросы или что добавить по теме, пишем в комментариях.


Источник: http://tods-blog.com.ua/web-development/verstka/fixed-menu/


Как сделать прокрутку страниц фиксированной

Как сделать прокрутку страниц фиксированной

Как сделать прокрутку страниц фиксированной

Как сделать прокрутку страниц фиксированной

Как сделать прокрутку страниц фиксированной

Как сделать прокрутку страниц фиксированной

Как сделать прокрутку страниц фиксированной

Как сделать прокрутку страниц фиксированной

Похожие новости:






[/SHORT_NEWS_LAST]
Страници: 1 2 3 > >>