Как зафиксировать шапку в html bootstrap
Перейти к содержимому

Как зафиксировать шапку в html bootstrap

  • автор:

Как правильно зафиксировать колонку на Bootstrap?

Помогите разобраться, как правильно зафиксировать (position:fixed) колонку в макете. Есть у меня в макете 2 колонки, левая и правая. В левой части панель, которую хочу «прикрутить» так, чтобы при прокрутке страницы вверх и вниз, она была строго фиксированной и никуда не съезжала. При этом чтобы правая колонка, которая содержит в себе ленту записей, свободно могла прокручиваться. Так же, хочется достигнуть максимальной адаптивности, чтобы на маленьком экране все это в виде плиток выстраивались друг-за дружкой (т.е. в одну колонку). HTML код двух колонок:

CSS код для этих колонок:

 .left{ position:fixed; width:20%; } .right{ width:68%; float:right; } 

На большом экране красота, всё как надо. Но вот если начать сужать размеры окна браузера, то начинается страшная картина, всё ужимается не так как надо. Выглядит страшно. Особенно на самом минимуме, до которого можно свернуть окно браузера по горизонтали. И элементы страницы не выстраиваются в одну колонку друг-за-дружку, как это было до описания тех двух классов (right и left) на CSS. А хочется максимального достижения своей цели и адаптивности. Не подскажете как реализовать всё это?

Если статья понравилась, то поделитесь ей в социальных сетях:

Комментарии: 12

22.04.2020, 19:54
Как это сделать для 4 бутстрапа? sticky-top не работает.
Александр Мальцев
23.04.2020, 04:03

Ссылка на пример. С помощью этого Bootstrap класса к элементу добавляется CSS-свойство position со значением sticky и некоторые другие. sticky не работает только в браузерах, которые не поддерживают его. Сейчас – это только Internet Explorer 10 и 11. В них данный блок будет отображаться как обычно (без прилипания).

07.06.2020, 01:01

Александр, добрый день. Попробовал ваш код на пустом шаблоне bootstrap с фиксированной sticky-top шапкой сайта. Возникает проблема с колонкой, она прилипает не к низу шапки, а заходит под шапку и крепится к верху экрана. Если возможно, покажите решение задачи, чтобы боковая колонка не поднималась выше нижней границы фиксированной шапки (горизонтальной навигационной панели). Видел решения с помощью JavaScript, очень хотелось бы увидеть вариант без применения JavaScript. Заранее спасибо!

Александр Мальцев
08.06.2020, 14:47

Привет! Для этого sticky-блоку нужно просто установить CSS-свойство top с нужным значением.
Например:

08.06.2020, 20:39
Все получилось, большое спасибо!
08.08.2016, 00:53
А если необходимо зафиксировать панель, на которой находятся две кнопки (рис.1)?

 

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

Александр Мальцев
08.08.2016, 12:58

Правильно. Элемент, которому Вы установили position, равный fixed, отрывается от своего места. Данный элемент можно предствить себе как прямоугольную область, которая привязывается к краям браузера и при прокрутке остаётся на том же месте. При этом он не занимает пространство у элементов, которые распологаются в обычном потоке.
Если страницу — представить как лист бумаги, в которой элементы распологаются один за другим в определённом порядке. То данный элемент (position: fixed) в этом случае, можно представить как отдельный прямоугольник, который можно расположить в любом месте этого листа. И чтобы как-то его расположить, ему необходимо установить какие-то привязки. К верху экрана (top), к левой стороне (left), к правой стороне (right), к нижней стороне (bottom), ширину (width) и высоту (height). При этом не стоит задавать все привязки или размеры этого прямоугольника, достаточно использовать те которые будут одназначно определять его место на странице.
Например, если Вы хотите его привязать к низу страницы на всю ширину (с учётом полей), то это можно сделать так:

Т.е. от левого края браузера 15px, от правого края 15px, от низа 20px, высота, определяется содержимым.
Если у Вас адаптивный дизайн, то в этом случае необходимо использовать медиа-запросы.
Если вариант более сложный и Вы не знаете точные значения блока fixed, то необходимо будет их задавать с помощью JavaScript.

Лип­кая шап­ка таб­ли­цы на CSS

Практически на всех сайтах есть таблицы. А если эти таблицы имеют более дюжины строк, то вам, рано или поздно, понадобится сделать шапку таблицы «липкой». Многие до сих пор делают это с помощью JavaScript, но есть способ на чистом CSS.

Position Sticky Скопировать ссылку

thead

Как не выходить за рамки? Скопировать ссылку

К сожалению почти у всех таблиц, которые я встречаю, используется border-collapse: collapse . С этим свойством проще делать рамки для ячеек, но при этом сами рамки им уже не принадлежат, а как бы становятся частью самой таблицы. А это значит, что если шапка таблицы и стала липкой — рамки её ячеек всё равно прокручиваются вместе с таблицей.

Чтобы избавиться от этой проблемы, можно использовать border-collapse: separate . Да, с этим свойством рамки ячеек перестанут схлопываться, но нам это не помешает.

В некоторых дизайн-системах у ячеек есть только горизонтальные рамки, а значит достаточно просто указывать border-top или border-bottom . Но даже если вам нужно указать рамки со всех сторон, то есть много способов это сделать:

Рамки для конкретных сторон Скопировать ссылку

:root < --border-width: 2px; --border-color: #CED4DA; --border: var(--border-width) solid var(--border-color); >table < border-collapse: separate; border-spacing: 0; >thead < position: sticky; top: 0; >th, td < border-right: var(--border); border-bottom: var(--border); >th:first-child, td:first-child < border-left: var(--border); >thead tr:first-child th

Рамки как box-shadow Скопировать ссылку

table < border-collapse: separate; border-spacing: var(--border-width); >thead < position: sticky; top: var(--border-width); >th, td

В примере выше мы устанавливаем расстояние между ячейками с помощью border-spacing для таблицы и отступ для прилипания с помощью top для шапки, равный размеру рамки. А затем добавляем ячейкам тень box-shadow , имитирующую рамку.

Рамки как outline Скопировать ссылку

table < border-collapse: separate; border-spacing: var(--border-width); >thead < position: sticky; top: var(--border-width); >th, td

В примере выше мы повторяем трюк из предыдущего примера, но имитирурем рамку с помощью outline .

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

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

Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает несколько таблиц на одной странице. Из минусов – не корректно работает на мобильных.

У таблицы добавляется только класс – fixtable .

  .
Артикул Текущая МРЦ Новая РРЦ
2934/8C 20 369,00 14 258,30
2756/6C 16 276,00 11 393,20
2934/8C 20 369,00 14 258,30
CSS
.fixtable-fixed
JS
function FixTable(table) < var inst = this; this.table = table; $('tr >th',$(this.table)).each(function(index) < var div_fixed = $('').addClass('fixtable-fixed'); var div_relat = $('').addClass('fixtable-relative'); div_fixed.html($(this).html()); div_relat.html($(this).html()); $(this).html('').append(div_fixed).append(div_relat); $(div_fixed).hide(); >); this.StyleColumns(); this.FixColumns(); $(window).scroll(function()< inst.FixColumns() >).resize(function()< inst.StyleColumns() >); > FixTable.prototype.StyleColumns = function() < var inst = this; $('tr >th', $(this.table)).each(function()< var div_relat = $('div.fixtable-relative', $(this)); var th = $(div_relat).parent('th'); $('div.fixtable-fixed', $(this)).css(< 'width': $(th).outerWidth(true) - parseInt($(th).css('border-left-width')) + 'px', 'height': $(th).outerHeight(true) + 'px', 'left': $(div_relat).offset().left - parseInt($(th).css('padding-left')) + 'px', 'padding-top': $(div_relat).offset().top - $(inst.table).offset().top + 'px', 'padding-left': $(th).css('padding-left'), 'padding-right': $(th).css('padding-right') >); >); > FixTable.prototype.FixColumns = function() < var inst = this; var show = false; var s_top = $(window).scrollTop(); var h_top = $(inst.table).offset().top; if (s_top < (h_top + $(inst.table).height() - $(inst.table).find('.fixtable-fixed').outerHeight()) && s_top >h_top) < show = true; >$('tr > th > div.fixtable-fixed', $(this.table)).each(function()< show ? $(this).show() : $(this).hide() >); > $(document).ready(function()< $('.fixtable').each(function() < new FixTable(this); >); >);

Фиксированный header при прокрутке: решение без framesets

Если вы хотите, чтобы шапка сайта всегда оставалась на экране в верхней его части независимо от прокрутки страницы, вам необходимо прописать для неё в CSS следующие параметры: position: fixed; и top: 0; . Чтобы ваша шапка была всегда видна на фоне остального контента, используйте параметр z-index и присвойте ему достаточно высокое значение:

Скопировать код

.header < position: fixed; top: 0; width: 100%; /* Шапка займёт всю ширину окна браузера */ z-index: 1000; /* Высокое значение, чтобы шапка была всегда на первом плане */ >

Теперь приложите этот CSS-код к элементу, представляющему шапку вашего сайта:

Скопировать код

Не забудьте учесть, что прибавление к элементу свойства position: fixed; изымает его из нормального потока документа. поэтому нужно добавить к основному контенту страницы отступ сверху (с помощью параметра margin-top ), равный высоте шапки. Это предотвратит перекрытие основного контента шапкой и сделает содержимое сайта лучше читаемым.

Как это сделать: варианты и соображения

Улучшенный вариант: «липкая» шапка

Если вам необходимо, чтобы шапка страницы перемещалась вместе с прокруткой, но «прилипала» к верху экрана при достижении определённой точки, примените свойство position: sticky; :

Скопировать код

.header < position: sticky; top: 0; z-index: 10; /* Не так высокое значение как в "фиксированном" варианте, но всё же выше обычного контента */ >

Когда «липкость» необходима

  • Используйте значение свойства position , отличное от static .
  • Задать параметр смещения ( top , bottom , left , right ), чтобы указать, от какой из сторон контейнер должен «прилипать» к границе окна браузера.

Шапка на всю ширину экрана

Параметр width: 100%; обеспечивает распространение шапки на всю ширину окна браузера.

Индивидуальное оформление

Добавьте к шапке индивидуальное оформление – фоновый цвет background-color , тени box-shadow , чтобы она привлекала внимание.

Bootstrap для быстрых результатов

Если вы используете Bootstrap, просто примените класс .navbar-fixed-top , чтобы быстро настроить фиксацию шапки.

Анимация для привлекательности

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

Проверка стабильности

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

Простота – залог надёжности

Для обеспечения высокой производительности сайта и снижения зависимости от JavaScript, предпочитайте использовать чистый CSS для создания статичных или «липких» шапок.

Визуализация

Рассмотрим web-страницу как разнообразный базар:

Элемент Представление
Шапка (��) Вывеска, которую всегда видно
Содержимое (��️) Прилавки и лотки, которые меняются при движении

Используя CSS для фиксации шапки:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *