css - personalizar - Reducción de la barra de navegación cuando se desplaza hacia abajo(bootstrap3)

personalizar navbar bootstrap

Question

Me gustaría construir un efecto de barra de navegación como está en http://dootrix.com/ en mi página (después de que la barra se hace más pequeña y el logotipo cambia). Estoy usando el programa de arranque 3 para mi página. ¿Hay alguna manera fácil de realizarlo con bootstrap?

Answer 1

Barra de navegación pegajosa:

Para hacer un navegador adhesivo necesitas agregar la clase navbar-fixed-top a tu navegador

Documentación oficial :
http://getbootstrap.com/components/#navbar-fixed-top

Ejemplo oficial :
http://getbootstrap.com/examples/navbar-fixed-top/

Un código de ejemplo simple :

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
...
</div>
</nav>

con jsfiddle relacionado: http://jsfiddle.net/ur7t8/

Cambiar el tamaño de la barra de navegación:

Si desea que la barra de navegación cambie de tamaño mientras se desplaza por la página, puede dar un vistazo a este ejemplo: http://www.bootply.com/109943

JS

$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$(''nav'').addClass(''shrink'');
} else {
$(''nav'').removeClass(''shrink'');
}
});

CSS

nav.navbar.shrink {
min-height: 35px;
}

Animación:

Para agregar una animación mientras se desplaza, todo lo que necesita hacer es establecer una transición en el navegador

CSS

nav.navbar{
background-color:#ccc;
// Animation
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}

Hice un jsfiddle con el código de ejemplo completo: http://jsfiddle.net/Filo/m7yww8oa/

Answer 2

Estoy usando este código para mi proyecto

$(window).scroll ( function() {
if ($(document).scrollTop() > 50) {
document.getElementById(''your-div'').style.height = ''100px''; //For eg
} else {
document.getElementById(''your-div'').style.height = ''150px'';
}
}
);

Probablemente esto ayudará

Answer 3

Para aquellos que no están dispuestos a usar jQuery aquí hay una forma de hacer Javascript de Vanilla Javascript usando classList :

function runOnScroll() {
var element = document.getElementsByTagName(''nav'') ;
if(document.body.scrollTop >= 50) {
element[0].classList.add(''shrink'')
} else {
element[0].classList.remove(''shrink'')
}
console.log(topMenu[0].classList)
};

Puede haber una manera más agradable de hacerlo usando alternar , pero lo anterior funciona bien en Chrome

Answer 4

Puede combinar eventos "scroll" y "scrollstop" para lograr el resultado deseado:

$(window).on("scroll",function(){
$(''nav'').addClass(''shrink'');
});
$(window).on("scrollstop",function(){
$(''nav'').removeClass(''shrink'');
});

Answer 5

Si está utilizando AngularJS, y está utilizando Angular Bootstrap: https://angular-ui.github.io/bootstrap/

Puedes hacer esto muy bien así:

HTML:

<nav id="header-navbar" class="navbar navbar-default" ng-class="{''navbar-fixed-top'':scrollDown}" role="navigation" scroll-nav>
<div class="container-fluid top-header">
<!--- Rest of code --->
</div>
</nav>

CSS: ( Tenga en cuenta que uso el relleno como un navegador más grande para encoger sin relleno, puede modificarlo como desee)

nav.navbar {
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
background-color: white;
margin-bottom: 0;
padding: 25px;
}
.navbar-fixed-top {
padding: 0;
}

Y luego agrega tu directiva

Directiva : ( Tenga en cuenta que es posible que necesite cambiar this.pageYOffset >= 50 de 50 a más o menos para satisfacer sus necesidades)

angular.module(''app'')
.directive(''scrollNav'', function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function() {
if (this.pageYOffset >= 50) {
scope.scrollDown = true;
} else {
scope.scrollDown = false;
}
scope.$apply();
});
};
});

Esto hará el trabajo muy bien, de manera animada y genial.

Answer 6

toggleClass también funciona:

$(window).on("scroll", function() {
$("nav").toggleClass("shrink", $(this).scrollTop() > 50)
});