Фиксирующаяся при скролле панель навигации, только CSS
Как закрепить панель навигации в верхней части страницы только с помощью CSS и не скроллить её вместе с контентом.
Долгое время для фиксации панели навигации требовалось использовать JavaScript, чтобы определить, когда при прокрутке страницы ей нужно добавить CSS-класс для переключения в position: absolute.
Чтобы получить аналогичный эффект, можно использовать только простое CSS-свойство.
position: stickyСвойство position: sticky укажет браузеру, что следует позволить элементу прокручиваться вместе с остальной частью документа, пока он не достигнет верхней части страницы. Как только это произойдет, позиция элемента фиксируется, а остальные элементы на странице прокручиваются за ним.
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}<nav>
<ul>
<li><a href="#a">Section A</a></li>
<li><a href="#b">Section B</a></li>
<li><a href="#c">Section C</a></li>
<li><a href="#d">Section D</a></li>
</ul>
</nav>See this code position sticky on x.
xhtml.ru.
На первый взгляд всё работает нормально. Но, если приглядеться, клик по ссылке в навигации скроллит контент так, что заголовок секции самым бесстыдным образом оказывается под зафиксировавшейся панелью с навигацией. Это поправимо.
scroll-margin-topСвойство scroll-margin-top укажет браузеру высоту отступа, которую он должен использовать при скролле к контейнеру. Это свойство следует указывать элементам с якорями, на которые ведут ссылки из панели навигации.
Добавим контейнерам свойство scroll-margin-top и присвоим ему значение 1em. Теперь, когда браузер перейдёт по ссылке к якорю, он оставит сверху отступ 1em.
И ещё: этот отступ применяется только к прокрутке. Сам элемент-контейнер по-прежнему сохраняет свои обычные отступы в контексте документа.
See this code position sticky on x.xhtml.ru.
HTML-код примера фиксирующейся при прокрутке панели навигации
<h2>Scroll Margin</h2>
<nav>
<ul>
<li><a href="#a">Section A</a></li>
<li><a href="#b">Section B</a></li>
<li><a href="#c">Section C</a></li>
<li><a href="#d">Section D</a></li>
</ul>
</nav>
<main>
<article><h3>Section A</h3></article>
<article><h3>Section B</h3></article>
<article><h3>Section C</h3></article>
<article><h3>Section D</h3></article>
</main>CSS-код примера фиксирующейся панели скролл-навигации
body { margin: 0 auto; max-width: 40em; width: 88%; } . section { color: #ffffff; height: 75vh; margin: 0; scroll-margin-top: 1em; } #a { background-color: #0074d9; } #b { background-color: #2ecc40; } #c { background-color: #ff851b; } #d { background-color: #b10dc9; } h3 { margin: 0; padding: 0; } .sticky { background-color: #ffffff; position: -webkit-sticky; position: sticky; top: 0; } .list-inline { list-style: none; margin-left: -0.5em; margin-right: -0.5em; padding: 0; } .list-inline > li { display: inline-block; margin-left: 0.5em; margin-right: 0.5em; } .list-inline > li:before { content: "\200B"; /* 1 */ position: absolute; /* 2 */ }
section {
color: #ffffff;
height: 75vh;
margin: 0;
scroll-margin-top: 1em;
}
#a { background-color: #0074d9; }
#b { background-color: #2ecc40; }
#c { background-color: #ff851b; }
#d { background-color: #b10dc9; }
h3 {
margin: 0;
padding: 0;
}
.sticky {
background-color: #ffffff;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.list-inline {
list-style: none;
margin-left: -0.5em;
margin-right: -0.5em;
padding: 0;
}
.list-inline > li {
display: inline-block;
margin-left: 0.5em;
margin-right: 0.5em;
}
.list-inline > li:before {
content: "\200B"; /* 1 */
position: absolute; /* 2 */
}Пара слов о поддержке
position: sticky и scroll-margin-top браузерамиСвойство position: sticky работает во всех современных браузерах, но на момент написания этой заметки не работает с элементами thead и tr в Chrome и Edge (хотя оно работает с th), а также table в Firefox.
Свойство scroll-margin-top работает во всех современных браузерах.
Оба CSS свойства не работают в маргинальном IE-11 и более старых версиях IE.
Sticky sidebar (VanillaJS)
How to prevent anchor links from scrolling behind a sticky header with one line of CSS
Поддержка CSS
position: sticky в вашем браузереposition: sticky
Навигация по вашему сайту — amp.dev
У большинства мобильных сайтов есть меню навигации по сайту. Такие меню могут быть реализованы различными способами. В этом руководстве мы опробуем следующие способы навигации для AMP-страниц:
- Обратная ссылка на вашу домашнюю страницу — самый простой вариант.
- Боковая панель навигации, созданная с помощью компонента
amp-sidebar.
Обратная ссылка на домашнюю страницу
Самый простой способ предоставить вашим пользователям доступ к стандартным возможностям навигации вашего сайта — просто перенаправить их обратно на вашу домашнюю страницу!
Попробуйте заменить <header> следующей версией, содержащей ссылку:
<header> <a href="homepage.
html">
<amp-img
src="icons/home.png"
></amp-img>
</a>
<div>News Site</div>
</header>
После чего добавьте в свой встроенный CSS следующие правила стиля:
.home-button {
margin-top: 8px;
}
.headerbar {
height: 50px;
position: fixed;
z-index: 999;
top: 0;
width: 100%;
display: flex;
align-items: center;
}
.site-name {
margin: auto;
}
article {
margin-top: 50px;
}
Теперь обновите страницу. В левом верхнем углу страницы должна отобразиться ссылка, ведущая на homepage.html. Если вы нажмете на значок «Домой», вы обнаружите, что он никуда не ведет, так как у нас нет файла homepage.html.
Эту ссылку можно заменить URL-адресом домашней страницы вашего сайта, чтобы пользователи могли переходить к другим частям вашего сайта посредством уже существующих на нем навигационных функций.
Это простейший подход, использующий существующую навигацию по вашему сайту.
Навигация с помощью боковой панели
Одним из распространенных методов навигации является добавление значка меню, при нажатии на который сбоку страницы открывается набор навигационных ссылок. В AMP мы можем создать такую навигацию с помощью компонента amp-sidebar.
Сначала мы должны добавить JavaScript-код компонента amp-sidebar в тег <head>:
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" ></script>
Далее мы хотим отобразить значок меню. При нажатии на значок откроется боковая панель. Чтобы отобразить значок «гамбургер» вместо значка «домой», <header> следующим кодом:
<header>
<div role="button" on="tap:sidebar1.toggle" tabindex="0">
☰
</div>
<div>News Site</div>
</header>
В вышеуказанном коде мы включаем/выключаем отображение (toggle) боковой панели с помощью атрибута on на элементе amp-sidebar, который обозначен идентификатором sidebar1.
Давайте добавим боковую панель.
Сразу после </header> добавьте
<amp-sidebar layout="nodisplay" side="left">
<div
role="button"
aria-label="close sidebar"
on="tap:sidebar1.toggle"
tabindex="0"
>
✕
</div>
<ul>
<li><a href="#">Example 1</a></li>
<li><a href="#">Example 2</a></li>
<li><a href="#">Example 3</a></li>
</ul>
</amp-sidebar>
Наша боковая панель будет скрыта, но когда пользователь коснется значка «гамбургер», меню появится в левой части экрана. Чтобы закрыть меню, пользователь может коснуться значка X.
Наконец, добавьте
.hamburger {
padding-left: 10px;
}
.sidebar {
padding: 10px;
margin: 0;
}
.sidebar > li {
list-style: none;
margin-bottom: 10px;
}
.sidebar a {
text-decoration: none;
}
. close-sidebar {
font-size: 1.5em;
padding-left: 5px;
}
close-sidebar {
font-size: 1.5em;
padding-left: 5px;
}
Давайте полюбуемся нашей боковой панелью. Обновите и перезагрузите AMP-страницу. Вы должны увидеть что-то вроде следующего:
Sidebar menu navigationСтраница выглядит отлично! Добавим еще один штрих — пользовательский шрифт.
Как сделать панель навигации в HTML
следующий → ← предыдущая Если мы хотим сделать панель навигации в формате Html, мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко создать панель навигации. Шаг 1: Во-первых, мы должны ввести HTML-код в любом текстовом редакторе или открыть существующий HTML-файл в текстовом редакторе, в котором мы хотим создать панель навигации. <Голова> <Название> Сделать панель навигации <Тело> Шаг 2: Теперь мы должны определить тег <Тело> <навигация> Вы находитесь на сайте JavaTpoint….. Шаг 3: После этого мы должны определить тег
|