web-dev-qa-db-fra.com

Réduire la barre de navigation lors du défilement (bootstrap3)

Je souhaite créer un effet de barre de navigation similaire à celui présent sur http://dootrix.com/ sur ma page (après avoir fait défiler la barre en diminuant la taille et en modifiant le logo). J'utilise bootstrap 3 pour ma page. Y a-t-il un moyen facile de le réaliser avec bootstrap?

csstwitter-bootstraptwitter-bootstrap-3
41
Ed_

Barre de navigation collante:

Pour faire un nav collant, vous devez ajouter la classe navbar-fixed-top à votre nav 

Documentation officielle:
http://getbootstrap.com/components/#navbar-fixed-top

Exemple officiel:
http://getbootstrap.com/examples/navbar-fixed-top/

Un exemple de code simple: 

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

avec jsfiddle: http://jsfiddle.net/ur7t8/

Redimensionner la barre de navigation:

Si vous souhaitez redimensionner la barre de navigation pendant que vous faites défiler la page, vous pouvez consulter cet exemple: 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;
}

Animation:

Pour ajouter une animation pendant que vous faites défiler l'écran, il vous suffit de définir une transition sur le navigateur. 

CSS

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

J'ai créé un jsfiddle avec l'exemple de code complet: http://jsfiddle.net/Filo/m7yww8oa/

131
Filo

toggleClass fonctionne aussi:

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

Pour ceux qui ne veulent pas utiliser jQuery voici une méthode JavaScript en Vanille qui utilise la méthode 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)

};

Il pourrait y avoir un moyen plus agréable de le faire en utilisant toggle , mais cela fonctionne très bien dans Chrome

5
Stephane Paquet

Vous pouvez combiner "scroll" et "scrollstop" events pour obtenir le résultat souhaité:

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

Si vous utilisez AngularJS et vous utilisez Angular Bootstrap: https://angular-ui.github.io/bootstrap/

Vous pouvez faire ça si gentiment comme ça: 

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: (Note ici j'utilise padding comme un plus grand nav pour réduire sans padding, vous pouvez le modifier à votre guise)

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

Et puis ajoutez votre directive

Directive: (Note vous devrez peut-être changer le this.pageYOffset >= 50 de 50 à plus ou moins pour répondre à vos besoins)

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

Cela fera le travail bien, de manière animée et cool.

1
Al-Mothafar

J'utilise ce code pour mon projet 

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

Cela aidera probablement

0
Sudeep Bashistha