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