Анимировать / сжать NavBar при прокрутке с помощью Bootstrap 4
Я искал целую кучу для этого, но не могу найти рабочее решение. В принципе, я получил свой NavBar отлично, как я этого хочу. Теперь я хочу уменьшить NavBar, когда моя страница прокручивается вниз, чтобы сделать ее более тонкой, используя приятный плавный переход (анимация).
Это моя HTML-разметка для моего текущего NavBar:
<header>
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img class="animated bounceIn" src="img/logo-light.png" alt="I Web You – Perth Website Branding"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</nav>
</header>
Есть идеи, как мне этого добиться? Я много занимался поиском, но большинство решений было для Bootstrap 3.
ура
3 ответа
Обновлено 2018
Большинство сжатых реализаций прокрутки Navbar для 3.x выполняется с использованием компонента Affix для изменения стиля панели навигации в определенной позиции прокрутки.
Тем не менее, Affix был удален из Bootstrap 4..
"Отбросил плагин Affix jQuery. Вместо этого мы рекомендуем использовать позицию: липкий полифилл. Подробную информацию и конкретные рекомендации по полифилу см. В разделе HTML5.
Чтобы создать аналогичный эффект Navbar в Bootstrap 4, вы можете использовать position: sticky (поддерживается не во всех браузерах) путем добавления sticky-topкласс на Навбар. Это работает, чтобы "приклеить " Navbar, когда он достигает вершины,ноне вызывает событие, чтобы указать, когда он " застрял ".Следовательно, JS необходим для изменения стиля Navbar, когда он "застрял".
Один метод JS, поддерживаемый в современных браузерах, IntersectionObserver, Используйте его, чтобы "наблюдать", когда скрытый триггерный элемент над панелью навигации достигает области просмотра (когда stuck применяется к html элемент).
.stuck .sticky-top {
background-color: #222;
padding-top: 3px;
padding-bottom: 3px;
}
Прикрепленный Навбар - Демонстрация IntersectionObserver
Вы также можете использовать плагин jQuery, например ScrollPos-Styler, или написать свой собственный jQuery для управления стилями панели навигации при прокрутке...
Как это устроено:
Навбар с фиксированным верхом и data-toggle="affix":
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm py-3" data-toggle="affix">
<a href="#" class="navbar-brand">Brand</a>
<a class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</a>
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">..</a>
</li>
</ul>
</div>
JQuery для просмотра позиции прокрутки и условно переключить .affix учебный класс:
var toggleAffix = function(affixElement, scrollElement, wrapper) {
var height = affixElement.outerHeight(),
top = wrapper.offset().top;
if (scrollElement.scrollTop() >= top){
wrapper.height(height);
affixElement.addClass("affix");
}
else {
affixElement.removeClass("affix");
wrapper.height('auto');
}
};
/* use toggleAffix on any data-toggle="affix" elements */
$('[data-toggle="affix"]').each(function() {
var ele = $(this),
wrapper = $('<div></div>');
ele.before(wrapper);
$(window).on('scroll resize', function() {
toggleAffix(ele, $(this), wrapper);
});
// init
toggleAffix(ele, $(window), wrapper);
});
CSS для управления стилем аффикса (отступы / высота, цвет и т. Д.):
html,body {
height:100%;
padding-top:56px; /*height of fixed navbar*/
}
.navbar {
-webkit-transition:padding 0.2s ease;
-moz-transition:padding 0.2s ease;
-o-transition:padding 0.2s ease;
transition:padding 0.2s ease;
}
.affix {
padding-top: 0.2em !important;
padding-bottom: 0.2em !important;
-webkit-transition:padding 0.2s linear;
-moz-transition:padding 0.2s linear;
-o-transition:padding 0.2s linear;
transition:padding 0.2s linear;
}
section {
min-height:calc(100% - 70px);
}
Примечание. Начиная с Bootstrap 4.0.0, панель навигации немного изменилась navbar-toggleable-* изменился на navbar-expand-
Липкий Топ Navbar - jQuery Демо
Наконец, вы можете использовать простую функцию jQuery $(window).scroll(), если вы знаете точное положение, когда Navbar нужно придерживаться...
$(window).scroll(function() {
/* affix after scrolling 100px */
if ($(document).scrollTop() > 100) {
$('.navbar').addClass('affix');
} else {
$('.navbar').removeClass('affix');
}
});
https://www.codeply.com/go/62Roy6RDOa
Еще Bootstrap 4 меняет стиль Navbar на примерах прокрутки:
просто липкий после прокрутки (4.0.0)
высота усадки (4.0.0)
высота усадки (альфа-6)
прозрачный на фоне
изменить цвет после прокрутки
изменить цвет navbar bg с помощью секций scrollspy
Смежные вопросы:
Исправление навигационной панели вверху прокрутки
Affix не работает в Bootstrap 4 (альфа)
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});nav.navbar.shrink {
width: 100%;
height: 35px;
background-color: #111;
box-shadow: 0 1px 0 0 #dadada;
position: fixed;
left: 0px;
transition: all 1.5s ease;
}
nav.navbar.shrink .navbar-brand img{
height: 50px;
width: 120px;
transition: all 1.5s ease;
}
nav.navbar.shrink a {
font-size: 14px;
padding-bottom: 10px !important;
padding-top: 10px !important;
transition: all 1.5s ease;
}
nav.navbar.shrink .navbar-toggler {
margin: 8px 15px 8px 0;
padding: 4px 5px;
transition: all 1.5s ease;
}
.header{
height:100px;
}
.navbar-brand{
padding-left:30px;
padding-top:30px;
padding-bottom:30px;
}
.collapse{
padding-right:30px;
}
.logo{
width: 170px;
height: 58px;
}
.hero-container p{
color:black;
text-align: center;
height:auto;
}
.image-container{
text-align:center;
}
.banner{
background-image: url(../images/banner.jpg);
background-repeat: no-repeat;
padding-top: 70px;
padding-left: 30px;
padding-right:30px;
padding-bottom: 78px;
width:100%;
height:auto;
}
.banner .row h4,p{
color: white;
}
.client{
height: 635px;
margin-top:74px;
padding-right:10px;
padding-left:10px;
}
.btn-primary{
background: transparent;
width:170px;
border: 1px solid white;
color:white;
}
form{
padding-top:56px;
padding-bottom:56px;
padding-left: 30px;
height:auto;
}
form,h2,label{
color:white;
}
.above{
margin-bottom:34px;
width:100%;
height:auto;
padding-right: 30px;
}
.below{
width:100%;
height:auto;
padding-right: 30px;
}
.heading{
color: black;
margin-top: 62px;
}
.lead{
color:black;
}
.form_banner{
background-image: url(../images/form_banner.jpg);
background-repeat: no-repeat;
width: 100%;
}
.contact{
background-image: url(../images/contact.png);
background-repeat: no-repeat;
margin-bottom: 40px;
margin-top:50px;
height:auto;
width:100%;
padding-left: 313px;
padding-right:313px;
padding-top: 64px;
padding-bottom:64px;
text-align: center;
}
.contact, h5{
color:white;
}
hr{
display: block;
margin-top: 0.1em;
margin-bottom: 0.1em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
.footer_img{
padding-left: 30px;
width:170px;
height:63px;
}
.footer{
margin-bottom: 41px;
}<!doctype HTML>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container-fluid">
<div class="header container">
<div class="row">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">HeRo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Company<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Capabilities</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Customers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Innovation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="hero-container container">
<div class="row">
<div class="col">
<p>Commerce</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col">
<p>Interactive</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>
<div class="col">
<p>Analytics</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>
<div class="col">
<p>Integration</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>
<div class="col">
<p>Cloud & Management Services</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>
</div>
</div>
<div class="banner container-fluid">
<div class="row">
<h4>Dedicated, Experience, Innovative</h4>
<p>For over a decade our experienced team has been delivering Digital Commerce solutions that change the way consumers research, interact and purchase. As mobility and pervasive connectivity continue to transform buying habits, we are focused on helping businesses discover and maximise new opportunities – be it direct to consumers, via resellers, or by other innovative models.</p>
<p>Our expertise is centred on the Digital Commerce solution that excels in delivering best-in-class Scalability and User Experience. From our global headquarters in India, we have expanded to empower Clients across four continents, with offices located in Singapore, USA, Australia and the UK.</p>
<h4>BUSINESS</h4>
<p>Our approach is to listen to you as the experts in your market. We look to complement your insight with a project team capable of understanding your business and delivering better digital experience. Our in-country Advisors will help assess your requirements and collaboratively design a service that meets your strategic goals.</p>
<h4>TECHNOLOGY</h4>
<p>With a specialised team of Creative Designers, Developers, Engineers and Architects we have substantial experience across many leading enterprise and open source platforms. Beyond our core expertise in Digital Commerce, we also offer Mobility, Integration, Digital Analytics, Development and other custom Web and applications development services.</p>
</div>
</div>
<!-- FOOTER -->
<div class="footer container">
<div class="clearfix">
<span class="float-left"><a href="#"><img class="footer_img" src="images/ibm_logo.png"></a></span>
<span class="float-right">© AbcXyZ Inc and Affiliates.All Rights Reserved</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>Используйте этот код. Это просто и легко. Я надеюсь, что вы получите понимание. Я уменьшил класс и добавил бы его к панели навигации, когда он пересекает 50 пикселей. А отдых - это все, что я поставил в классе Shrink.
Оба приведенных выше ответа выглядели длинными и сложными, и, конечно же, я подумал, что в Bootstrap 4.1 должен быть действительно удобный способ сделать это - это 2018 год! Ну да... нет... В сети есть несколько интересных ответов, если вы посмотрите, например, на некоторые шаблоны на startbootstrap.com.
Я не видел ничего сильно отличающегося от вышеупомянутого...
Добавить или удалить класс при прокрутке / загрузке страницы...
var o = function() {
var mn = $("#mainNav");
mn.offset().top > 100 ? mn.addClass("navbar-shrink") : mn.removeClass("navbar-shrink");
};
o(), $(window).scroll(o);
Тогда стиль основан на том добавленном классе...
#mainNav {
background-color: #0f6f56;
transition: all 1s ease;
}
#mainNav.navbar-shrink {
background-color: pink;
}