Получить профессию в SkyproРешение: перекрытие содержимого сайта navbar в Bootstrap
Быстрый ответ
Для того чтобы сделать содержимое видимым и недоступным для перекрытия фиксированной навигационной панелью в Bootstrap, примените отступ padding-top к тегу <body>. Значение этого отступа должно соответствовать высоте панели. Например, если высота равна стандартным 50px, сделайте следующее:
body { padding-top: 70px; } /* Теперь контент перенесен ниже на 70px и выглядит отлично! */Если у вас Bootstrap 4 и новее, вы можете использовать вспомогательные классы для задания отступов:
<body class="pt-5">
<!-- Теперь ничто не сможет скрыть ваш контент! -->
</body>Таким образом, вы обеспечите видимость содержимого под навигационной панелью при прокрутке страницы.
Регулируем padding-top
Если дизайн вашей веб-страницы содерижт элементы разных размеров или же высота навигационной панели отличается от стандартной, отрегулируйте значение отступа padding-top. Определите реальную высоту вашей панели и, в случае если она более 50px, скорректируйте отступ так:
body { padding-top: 95px; } /* Наша панель навигации несколько выше стандартной и отступ должен быть больше */Учет адаптивного дизайна
Подгоните отображение под различные размеры экранов с помощью медиа-запросов для корректировки padding-top. Высота навигационной панели может быть различной на маленьких экранах:
@media (min-width: 768px) {
body { padding-top: 70px; } /* Большие экраны заслуживают больший отступ */
}
@media (max-width: 767.98px) {
body { padding-top: 50px; } /* Меньшие экраны требуют меньший отступ */
}Замените класс "navbar-fixed-top" на "sticky-top", чтобы обеспечить неперекрываемость содержимого:
<nav class="navbar navbar-default sticky-top">
<!-- Я всегда на виду и не захватываю ваше содержимое -->
</nav>Документация Bootstrap 4 поможет вам разобраться с sticky-top.
Управление перекрытием элементов с помощью z-index
Если некоторые элементы конкурируют за зону видимости, применяйте свойство z-index для контроля их перекрытия:
.navbar-fixed-top { z-index: 1030; } /* Панель навигации будет всегда привлекать пристальное внимание */Визуализация
Рассмотрите веб-страницу как модный киоск с бургерами:
🍔 == Навигационная панель
🥤 == Содержимое
Навигационная панель (🍔), если она закреплена, может перекрыть содержимое (🥤). Отделите их друг от друга, создав пространство между ними.
🍔
-----
🥤Этот подход поможет каждому элементу занимать свое место, не создавая помех другим.
Динамические элементы навигации
В случае элементов, таких как раскрывающийся поиск, которые способны менять размер панели, применяйте JavaScript для адаптивного сохранения отступа:
function fixNavbarOverlap() {
const navbarHeight = document.querySelector('.navbar').offsetHeight;
document.body.style.paddingTop = `${navbarHeight}px`;
}
// Обновлите отступ при изменении размера окна для корректного отображения.
window.addEventListener('resize', fixNavbarOverlap);
fixNavbarOverlap();Быстрое решение проблемы смещения содержимого
Смещение, вызванное дополнительным padding-top, можно устранить, используя .navbar.navbar-default.navbar-static-top для стабилизации внешнего вида.
Фиксированная vs прилипающая навигационная панель: выбор подхода
Когда выбираете между fixed-top и sticky-top, определяйте главную цель с точки зрения пользовательского опыта, которого вы хотите достичь. fixed-top показывает панель всегда, в то время как sticky-top отображает ее только при необходимости, а именно во время прокрутки.