Фиксация меню html css

Как сделать — Фиксированное меню

Узнайте, как создать «фиксированное» меню с помощью CSS.

Cоздать фиксированное меню

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Чтобы создать фиксированное верхнее меню, используйте position:fixed и top:0 . Примечание, что фиксированное меню будет накладываться на другой контент. Чтобы исправить это, добавьте margin-top (к содержимому), которое равно или больше высоты вашего меню.

Пример

/* Навигационная панель */
.navbar overflow: hidden;
background-color: #333;
position: fixed; /* Установите навигационную панель в фиксированное положение */
top: 0; /* Расположите навигационную панель в верхней части страницы */
width: 100%; /* Полная ширина */
>

/* Ссылки в панели навигации */
.navbar a float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* Изменение фона при наведении курсора мыши */
.navbar a:hover background: #ddd;
color: black;
>

/* Основное содержание */
.main margin-top: 30px; /* Добавить верхнее поле, чтобы избежать наложения */
>

Создать фиксированное нижнее меню

Чтобы создать фиксированное нижнее меню, используйте position:fixed и bottom:0 :

Пример

/* Навигационная панель */
.navbar position: fixed; /* Установите навигационную панель в фиксированное положение */
bottom: 0; /* Расположите навигационную панель в нижней части страницы */
width: 100%; /* Полная ширина */
>

/* Основное содержание */
.main margin-bottom: 30px; /* Добавить в нижнее поле, чтобы избежать наложения */
>

Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигационных панелях.

Источник

Фиксирующаяся при скролле панель навигации, только CSS

Как закрепить панель навигации в верхней части страницы только с помощью CSS и не скроллить её вместе с контентом.

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

Чтобы получить аналогичный эффект, можно использовать только простое CSS-свойство.

position: sticky

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

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

scroll-margin-top

Свойство scroll-margin-top укажет браузеру высоту отступа, которую он должен использовать при скролле к контейнеру. Это свойство следует указывать элементам с якорями, на которые ведут ссылки из панели навигации.

Добавим контейнерам свойство scroll-margin-top и присвоим ему значение 1em . Теперь, когда браузер перейдёт по ссылке к якорю, он оставит сверху отступ 1em .

И ещё: этот отступ применяется только к прокрутке. Сам элемент-контейнер по-прежнему сохраняет свои обычные отступы в контексте документа.

HTML-код примера фиксирующейся при прокрутке панели навигации

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; >h2 < 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.

Источник

How TO — Fixed Menu

Step 2) Add CSS:

To create a fixed top menu, use position:fixed and top:0 . Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.

Example

/* The navigation bar */
.navbar overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
>

/* Links inside the navbar */
.navbar a float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* Change background on mouse-over */
.navbar a:hover background: #ddd;
color: black;
>

/* Main content */
.main margin-top: 30px; /* Add a top margin to avoid content overlay */
>

How To Create a Fixed Bottom Menu

To create a fixed bottom menu, use position:fixed and bottom:0 :

Example

/* The navigation bar */
.navbar position: fixed; /* Set the navbar to fixed position */
bottom: 0; /* Position the navbar at the bottom of the page */
width: 100%; /* Full width */
>

/* Main content */
.main margin-bottom: 30px; /* Add a bottom margin to avoid content overlay */
>

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

Источник

Фиксированные меню, блоки при прокрутке страницы

Как сделать эффект залипания при прокручивании страницы на блоках навигации, меню и любых других без дёрганий и анимации. Используем обычный CSS без JS , а также рассмотрим вариант на jQuery и нативный ванильный JavaScript

• Используем CSS — position:sticky
• Как сделать залипающую шапку
• Как сделать залипающий подвал
• Используем Sticky JS
• Как сделать фиксированное меню в шапке
• HTML
• JavaScript
• CSS
• Фиксированный виджет в сайдбаре
• Q2W3 Fixed Widget — плагин WordPress для фиксации виджета сбоку
• Как пользоваться
• Как сделать залипающий виджет, который не налезает на низ сайта
• HTML
• JavaScript
• Делаем залипание в сайдбаре вручную, вариант №2
• Предварительная подготовка
• Код HTML
• Код Javascript
• В заключение

Используем CSS — position:sticky

Использование CSS -свойства position:sticky с целью достичь эффекта залипания блока внутри родительского контейнера — самый эффективный, простой и нативный способ, который работает во всех браузерах (кроме Internet Explorer, которым уже почти никто не пользуется).

Как сделать залипающую шапку

 .header Посмотреть, как залипает header , и даже покрутить код можно на Codepen

Как сделать залипающий подвал

 .footer Посмотреть, как работает залипающий footer — Codepen

Используем Sticky JS

1. Качаете файл https://raw.githubusercontent.com/rgalus/sticky-js/master/dist/sticky.min.js
2. Сохраняете его на хостинге, где расположен сайт, и подключаете его в шаблоне:

Если нужно, чтобы залипающий блок останавливался, когда заканчивается родительский контейнер, укажите в родительском контейнере атрибут data-sticky-container

 
 
  
 
Sticky-js
 
Lorem ipsum.
 
 
  
 
  

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

Как сделать фиксированное меню в шапке

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

• Если скролл ниже, чем верхушка блока нашего меню, включаем залипание
• Иначе отключаем залипание

Вот и вся логика.
Можете проверить, как работает

HTML

HTML будет представлять собой что-то навроде

JavaScript

В Javascript будем определять нашу логику

jQuery(document).ready(function($) < var $window = $(window), // Основное окно $target = $("#nav"), // Блок, который нужно фиксировать при прокрутке $h = $target.offset().top; // Определяем координаты верха нужного блока (например, с навигацией или виджетом, который надо фиксировать) $window.on('scroll', function() < // Как далеко вниз прокрутили страницу var scrollTop = window.pageYOffset || document.documentElement.scrollTop; // Если прокрутили скролл ниже макушки нужного блока, включаем ему фиксацию if (scrollTop >$h) < $target.addClass("sheensay_fixed"); // Иначе возвращаем всё назад >else < $target.removeClass("sheensay_fixed"); >>); >);

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

// Определяем мобильный браузер function MobileDetect() < var UA = navigator.userAgent.toLowerCase(); return (/android|webos|iris|bolt|mobile|iphone|ipad|ipod|iemobile|blackberry|windows phone|opera mobi|opera mini/i.test(UA)) ? true : false; >jQuery(document).ready(function($) < // Если браузер не мобильный, работаем if (!MobileDetect()) < var $window = $(window), // Основное окно $target = $("#nav"), // Блок, который нужно фиксировать при прокрутке $h = $target.offset().top; // Определяем координаты верха нужного блока (например, с навигацией или виджетом, который надо фиксировать) $window.on('scroll', function() < // Как далеко вниз прокрутили страницу var scrollTop = window.pageYOffset || document.documentElement.scrollTop; // Если прокрутили скролл ниже макушки нужного блока, включаем ему фиксацию if (scrollTop >$h) < $target.addClass("sheensay_fixed"); // Иначе возвращаем всё назад >else < $target.removeClass("sheensay_fixed"); >>); > >);

CSS

В CSS определяется класс, которым фиксируем меню

Строки 4, 5, 6 не обязательны, по могут помочь при горизонтальном выравнивании и создании эффекта полосы на всю ширину экрана.
Прозрачность регулируется в background: rgba(255, 0, 0, 0.1); , а именно в последнем параметре 0.1 , варируется от 0 (прозрачный) до 1 (непрозрачный), это аналог css свойства opacity

Фиксированный виджет в сайдбаре

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

Q2W3 Fixed Widget — плагин WordPress для фиксации виджета сбоку

Q2W3 Fixed Widget — это Вордпресс-плагин, который позволяет при прокрутке страницы залипать виджетам, расположенным сбоку в сайдбаре.

Как пользоваться

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

У каждого виджета появляется возможность залипания

Как сделать залипающий виджет, который не налезает на низ сайта

Ниже показан вариант, который в основе содержит принцип фиксированной навигации из 1 пункта.
Задача — для определённого виджета сделать залипание, но так, чтобы он не налезал на подвал сайта.
Принцип прост: мы высчитываем несколько переменных, а именно:

Далее, на событии window.scroll мы считаем текущие координаты верха браузера.

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

HTML

  
 
 
 
 
 
Перед скриптом необходимо загрузить jQuery

jQuery( document ).ready(function( $ ) < var $window = $( window ), // Основное окно $target = $( "#fixed_scroll" ), // Блок, который нужно фиксировать при прокрутке $bottom = $( '#footer' ), // Нижний блок, за который нельзя заходить $top = $target.offset().top, // Определяем координаты верха нужного блока $height = $top + $target.outerHeight(), // Определяем координаты низа $target блока // Блок, который нужно фиксировать при прокрутке $bottom = $bottom.offset().top; // Определяем координаты низа нижнего блока // Нижний блок, за который нельзя заходить $window.on( 'scroll', function () < // Как далеко вниз прокрутили страницу var scrollTop = window.pageYOffset || document.documentElement.scrollTop; // Если прокрутили скролл ниже макушки нужного блока, но не ниже нижнего блока, включаем ему фиксацию if ( scrollTop >$top && scrollTop + $height < $bottom ) < $target.css( < position : 'fixed', top : '0px', //width : '1%', // Может пригодиться, если блок не имеет чёткого width >); // Докрутили до низа > else if ( scrollTop > $top && scrollTop + $height > $bottom ) < // Координата верха: куда нельзя заходить - минус верх - минус высота блока рекламы var top = $bottom - scrollTop - $height; $target.css( < position : 'fixed', top : top, >); > // Иначе возвращаем всё назад else < $target.attr( 'style', '' ); >> ); >);

Если код выше не помогает, проверьте, не использует ли какой-либо из родительских контейнеров css-свойство backface-visibility: hidden; . Если так, то можно заменить код

Делаем залипание в сайдбаре вручную, вариант №2

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

Предварительная подготовка

Для начала, вам нужно иметь содержание статьи. Также, необходимо подключить jQuery

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

Код HTML

Для примера возьмём содержание этой страницы

Код Javascript

jQuery(document).ready(function ($) < // Определяем мобильный браузер function MobileDetect() < var UA = navigator.userAgent.toLowerCase(); return (/android|webos|iris|bolt|mobile|iphone|ipad|ipod|iemobile|blackberry|windows phone|opera mobi|opera mini/i.test(UA)) ? true : false; >// Если не мобильная версия сайта и содержание статьи существует if (!MobileDetect() && $('.kc__wrap').length) < // В сайдбар добавляем обёртку для дубля содержания статьи $('.sidebar').append(', 600); >); var // Объявляем переменные $l = $('#post-content-list'), // Контейнер виджета дубля содержания страницы $ot = $l.offset().top, // Координаты верха виджета, $PostContentListOffsetTop $lh = $l.outerHeight(true), // Высота виджета меню, $PostContentListHeight $p = $('.post'), // Контейнер поста $w = $(window); // Контейнер главного окна // Если содержание не помещается в окно, удаляем его if ( $lh > $w.height() ) $l.remove(); // Обрабатываем событие скролла $w.on('scroll', function () < //console.log($('.post').height(), " ", eval($('#post-content-list').offset().top + $lh)); // Высота статьи var $ph = $p.height(); // Координаты скролла по вертикали var $wst = $w.scrollTop(); // Если прошли ниже, чем макушка виджета меню. if ($wst >$ot && // . и если не достигли конца статьи $ph > $wst + $lh) < $l.css(< "position": "fixed", "top": 0, "width": "360px" >).fadeIn(); > // Когда дошли до конца статьи, скрываем содержание статьи else if ($ph < $wst + $lh) < $l.fadeOut(); >// Иначе убираем фиксацию else < $l.css(< "position": "relative", "top": 0, "width": "360px" >).fadeIn(); > >); > >);

В заключение

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

Источник