Shrink barre de navigation pendant le défilement vers le bas à l'aide de Bootstrap 3

Je suis en utilisant Bootstrap 3 pour le développement d'un site web. J'ai besoin de créer une barre de navigation qui devrait progressivement diminuer à mesure que l'utilisateur fait défiler vers le bas.
Quelque chose comme - http://osticket.com
Comment puis-je créer ? Je suis en utilisant Bootstrap fixe de haut en exemple comme un point de départ - http://getbootstrap.com/examples/navbar-fixed-top/

j'ai besoin de mettre un logo sur la gauche, au lieu du texte et il est conseillé de réduire sa taille à mesure que l'utilisateur fait défiler vers le bas.
Besoin d'aide le plus vite possible!

Merci d'avance.

Avez-vous fait une tentative de résoudre ce problème vous-même? Ne ressemble pas à elle, d'où le downvote
"aussitôt que possible" est assez bon marché

OriginalL'auteur user3301160 | 2014-02-17

  1. 5

    Bon exemple de la réduction de défilement a été documentée ici: http://www.bootply.com/109943

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

    OriginalL'auteur Yabs

  2. 3

    Vous pouvez tout simplement faire la même façon qu'ils l'ont fait. Si vous regardez le source de la page, ils sont tout simplement l'ajout d'une classe à l'élément de corps lorsque la page défile. Cette classe est d'écraser le format d'affichage de l'en-tête.

    Pour détecter si la page a été défile vers le bas, ils sont à l'aide d'une fonction javascript avec des événements auditeurs. Vous pouvez regarder la fonction de code source ici:

    http://osticket.com/sites/all/themes/Porto/js/sticky.js

    OriginalL'auteur DjDCH

  3. 2

    Vous devez ajouter java-script pour cette fonction. Les classes CSS doivent être mis à jour en conséquence pour obtenir la réduction sur le défilement de l'affecter. Exemple complet est indiqué sur ce lien. http://www.bootply.com/109943#

    OriginalL'auteur Muhammad Asim