html - Animar/Reducir NavBar en desplazamiento usando Bootstrap 4

css bootstrap-4

Question

He buscado todo esto pero no puedo encontrar una solución que funcione. Básicamente tengo mi NavBar perfectamente como lo quiero. Ahora quiero reducir la barra de navegación cuando mi página se desplaza hacia abajo para que sea más delgada utilizando una transición suave y agradable (animación).

Este es mi marcado HTML para mi barra de navegación actual:

<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 &#8211; 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>

¿Alguna idea de cómo puedo lograr esto? He buscado mucho, pero la mayoría de las soluciones fueron para Bootstrap 3.

Aclamaciones

Answer 1

Ambas respuestas anteriores parecían largas y complicadas, seguramente (pensé) debe haber una forma realmente elegante de hacer esto ahora en Bootstrap 4.1: ¡es 2018! Bueno yeh - nah ... Hay algunas respuestas interesantes en la red, si startbootstrap.com un vistazo a algunas de las plantillas en startbootstrap.com por ejemplo.

No vi nada muy diferente de los de arriba ...

Agregar o eliminar una clase al desplazarse / cargar página ...

 var o = function() {
var mn = $("#mainNav");
mn.offset().top > 100 ? mn.addClass("navbar-shrink") : mn.removeClass("navbar-shrink");
};
o(), $(window).scroll(o);

Luego, estilo basado en esa clase adjunta ...

 #mainNav {
background-color: #0f6f56;
transition: all 1s ease;
}
#mainNav.navbar-shrink {
background-color: pink;
}

Answer 2

 $(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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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">&copy; 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>

Use este código, es simple y fácil. Espero que lo entiendas. Hice una reducción de clase que agregaría a la barra de navegación una vez que cruza 50 píxeles. Y el resto es todo CSS, que he puesto en la clase Shrink.

Answer 3

Actualizado 2018

La mayoría de las implementaciones de la barra de navegación de encogimiento en el desplazamiento para Bootstrap 3.x se realizan utilizando el componente Affix para cambiar el estilo de la barra de navegación en una posición de desplazamiento específica.

Sin embargo, Affix se ha eliminado de Bootstrap 4 ..

"Descarté el plugin Affix jQuery. En su lugar, recomendamos usar una posición: polyfill adhesivo. Consulte la entrada HTML5 Please para obtener detalles y recomendaciones específicas de polyfill".

Para crear un efecto de barra de navegación similar en Bootstrap 4, puede usar position: sticky (no es compatible con todos los navegadores) agregando la clase sticky-top a la barra de navegación. Esto funciona para " pegar " la barra de navegación cuando llega a la parte superior, pero no activa un evento para indicar cuándo está " atascada ". Por lo tanto, JS es necesario para cambiar el estilo de la barra de navegación cuando está " atascado ".

Un método JS admitido en los navegadores modernos es IntersectionObserver . Úselo para "mirar" cuando un elemento disparador oculto sobre la barra de navegación llega a la ventana gráfica (cuando se stuck se aplica al elemento html ).

.stuck .sticky-top {
background-color: #222;
padding-top: 3px;
padding-bottom: 3px;
}

Barra de navegación superior fija - IntersectionObserver Demo

También puede ScrollPos-Styler complemento jQuery como ScrollPos-Styler , o escribir su propio jQuery para controlar los estilos de la barra de navegación en el desplazamiento ...

Cómo funciona:

Una barra de navegación superior fija con 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 para ver la posición de desplazamiento y alternar condicionalmente la clase .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 para manipular el estilo de afijo (relleno / altura, color, etc.):

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);
}

Nota: a partir de Bootstrap 4.0.0 , la barra de navegación ha cambiado ligeramente a medida que navbar-toggleable-* ha cambiado a navbar-expand-

Barra de navegación superior adhesiva - jQuery Demo

Finalmente, puede usar una función simple jQuery $ (window) .scroll () si conoce la posición exacta de cuándo la barra de navegación debe pegarse ...

$(window).scroll(function() {
/* affix after scrolling 100px */
if ($(document).scrollTop() > 100) {
$(''.navbar'').addClass(''affix'');
} else {
$(''.navbar'').removeClass(''affix'');
}
});

https://www.codeply.com/go/62Roy6RDOa

Más Bootstrap 4 cambia el estilo de la barra de navegación en los ejemplos de desplazamiento :
simplemente adhesivo después del desplazamiento (4.0.0)
altura de contracción (4.0.0)
altura de contracción (alfa-6)
transparente sobre fondo
cambiar de color después de desplazarse
cambiar el color bg de la barra de navegación con secciones scrollspy

Preguntas relacionadas:
Fijando la barra de navegación a la parte superior en el desplazamiento
Affix no funciona en Bootstrap 4 (alfa)