twitter bootstrap fixer barre de navigation après le défilement

J'ai un nav-bar qui commence à 200px de haut de la page à charger. Comme je l'ai faites défiler vers le bas, je voudrais que le nav-bar "apposer" lui-même tout en haut de la page et être visible comme je l'ai défiler à travers le reste du contenu.
Je suis en mesure d'obtenir la valeur liquidative-bar pour rester en place si 200px de haut, et il ignore le contenu, j'ai tiré à droite et il tire tous vers la gauche. j'ai besoin de veiller à ce que la barre de navigation reste visible et que le layout/style est le même tout le chemin à travers.

ci-dessous est mon jsfiddle qui montre ce que je vais avoir des ennuis avec

  <!-- Begin Logo /Search -->
  <header class="masthead">
      <div class="row">
        <div class="span6">
          <div class="logo pull-left">
              <h1><a href="/">name</a></h1>
          </div>
        </div>
        <div class="span6">
            <div class="pull-right hidden-phone">
                <form class="search" action="/search" id="site-search">
                    <input type="hidden" name="records" value="6">
                    <div class="input-append">
                        <input type="text" name="q" class="search_box" placeholder="Search" value="" autocomplete="off" />
                        <button class="btn" type="submit"><i class="icon-search"></i></button>
                    </div>
                </form>     
            </div>
        </div>
      </div>
  </header>         


  <!-- Begin Navbar -->
  <div>
    <div class="navbar navbar-static">
      <div class="navbar-inner" id="mastnav">
        <div class="container">
            <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
            <div class="nav-collapse collapse">
                <ul class="nav"><li><a href="#">nav</a> </li></ul>
                <ul class="nav pull-right">
                    <li>
                        <a href="/cart"><i class="icon-shopping-cart"></i> <span id="cart-count">1</span></a>
                    </li>
                </ul>
            </div>      
        </div>
      </div>
    </div><!-- /.navbar -->
  </div>

JSFIDDLE

OriginalL'auteur Paul 'Whippet' McGuane | 2013-06-12

  1. 11

    Une fois que la valeur liquidative devient affix il ne suit plus la normale de la barre de navigation de styles CSS. Vous pourriez donner un id à l'extérieur de la DIV conteneur, puis de définir ce que le `code' élément. Utiliser CSS pour s'assurer qu'elle reste à 100% de largeur.

    #nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

    Travail Démo

    Liés à:

    Apposer Bootstrap scintille après l'apposer en bas atteint et le défilement retour haut de page

    cette réponse œuvres de tiers, même si maintenant la barre de navigation est le dépassement de la page sur le côté droit
    quelqu'un peut-il obtenir ce donc la barre de navigation ne pas dépasser les limites de la fenêtre du navigateur

    OriginalL'auteur Zim

  2. 2

    Ici est la modification de jsfiddle qui accomplit ce que vous voulez:

    Mise à jour: désolé! collé le mauvais jsfiddle! Réalisé quand j'ai semer le vote négatif! Je vais le faire à nouveau et mettre à jour dans un moment

    Mise à jour: voici est:

    http://jsfiddle.net/KUPbD/4/

    Comme une note, vous pouvez déclarer l'apposer dans le html avec data-spy="affix" et data-offset-top="", donc pas besoin d'un supplément de script en ligne

    Fonctionne dans tous les navigateurs, cependant, ne fonctionne pas sur l'ipad ou l'iPhone, des idées? - en fait, il ne fonctionne pas mais il y a un délai
    Retard sur les tablettes est en raison de défilement de l'événement

    OriginalL'auteur Jesús Carrera

  3. 2
    <script type="text/javascript">
    $(document).ready(function(e) {

        $(window).scroll(function () {
            if ($(window).scrollTop() > $('.navbar').offset().top) {
                $('.navbar').addClass('navbar-fixed-top');
                $('.navbar').removeClass('navbar-static-top');                  
            } else {
                $('.navbar').removeClass('navbar-fixed-top');
                $('.navbar').addClass('navbar-static-top');     
            }
        });         

    });
</script>

    OriginalL'auteur Michael Davenport

  4. -2

    Vous avez besoin pour apposer un conteneur externe de la barre de navigation, j'ai fait quelques modifications...

    Pas de changement sur ce Js, mais la structure html:-

    $('#mastnav').affix({
      offset: {
        top: 0
      }
   });

    Démo:- http://jsfiddle.net/KUPbD/1/

    OriginalL'auteur SaurabhLP