Comment utiliser le nouveau plugin affixe dans twitter ' s bootstrap 2.1.0 ?

Question

Le bootstrap, documentation sur ce sujet est un peu confus pour moi. Je veux obtenir le même type de comportement dans les docs avec l'affixe barre de navigation: La barre de navigation est en dessous d'un paragraphe d'une page de titre, et sur le défilement vers le bas, il devrait d'abord défiler l'écran jusqu'à atteindre le haut de la page, puis s'en tenir là fixes pour plus de scrolldowns.

Comme jsFiddle ne fonctionne pas avec la barre de navigation concept, j'ai mis en place une page séparée pour l'utilisation comme un exemple minimal: http://i08fs1.ira.uka.de/~s_drr/navbar.html

J'utilise ce que ma barre de navigation:

<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
    <div class="navbar-inner">
        <div class="container">
            <div class="span12">
                <a class="brand" href="#">My Brand</a> 
                This is my navbar.
             </div>
        </div> <!-- container -->
    </div> <!-- navbar-inner -->
</div> <!-- navbar -->

Je thinkg je voudrais data-offset-top de la valeur 0 (depuis la barre doit "coller" à la très haut", mais avec 50 il y a au moins un certain effet regardable.

Si mettre aussi le code javascript à la place:

     <script>
        $(document).ready (function (){
            $(".navbar").affix ();
        });
     </script>

Toute aide appréciée.

Answer 1

J'ai eu un problème similaire, et je crois que j'ai trouvé une meilleure solution.

Ne vous embêtez pas à la spécification data-offset-top dans votre code HTML. Au lieu de cela, le spécifier lorsque vous appelez .affix():

$('#nav').affix({
    offset: { top: $('#nav').offset().top }
});​

L'avantage ici est que vous pouvez changer la mise en page de votre site sans avoir besoin de mettre à jour l' data-offset-top d'attribut. Depuis cette utilise le réel de la position calculée de l'élément, il empêche également des incohérences avec les navigateurs qui en rendent l'élément à une position légèrement différente.

---

Vous aurez toujours besoin de serrage de l'élément vers le haut avec les CSS. En outre, j'ai dû mettre width: 100% de la valeur liquidative de l'élément depuis .nav éléments avec position: fixed se conduisent mal pour certaines raisons:

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

---

Une dernière chose: Lorsque fixé un élément devient fixe, son élément ne prend plus de place sur la page, résultant dans les éléments ci-dessous à "sauter". Pour éviter cette laideur, j'enveloppe la barre de navigation en div dont la hauteur j'ai mis à l'être égale à la barre de navigation au moment de l'exécution:

<div id="nav-wrapper">
    <div id="nav" class="navbar">
        <!-- ... -->
    </div>
</div>

.

$('#nav-wrapper').height($("#nav").height());

---

Voici l'obligation de jsFiddle de le voir en action.

Answer 2

Juste mis en œuvre pour la première fois, et voici ce que j'ai trouvé.

L' data-offset-top de la valeur est le nombre de pixels que vous devez faire défiler l'écran pour que l'apposition de l'effet de prendre place. Dans votre cas, une fois 50px équivaut, la classe sur votre article est modifié à partir d' .affix-top de .affix. Vous auriez probablement souhaitez définir data-offset-top environ 130px dans votre cas d'utilisation.

Une fois ce changement de classe se produit, vous devez positionner votre élément en css par style le positionnement pour la classe .affix. Bootstrap 2.1 définit déjà .affix comme position: fixed; donc tout ce que vous devez faire est d'ajouter vos propres valeurs de position.

Exemple:

.affix {
    position: fixed; 
    top: 20px; 
    left: 0px;
}

Answer 3

Pour résoudre ce problème j'ai modifié l'affixe plugin pour émettre un jQuery événement lorsqu'un objet est apposée ou unaffixed.

Voici le pull request: https://github.com/twitter/bootstrap/pull/4712

Et le code: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js

Puis pour attacher la barre de navigation:

<script type="text/javascript">
$(function(){
    $('#navbar').on('affixed', function () {
        $('#navbar').addClass('navbar-fixed-top')
    });

    $('#navbar').on('unaffixed', function () {
        $('#navbar').removeClass('navbar-fixed-top')
    });
});
</script>

Answer 4

Vous devez supprimer `` partir de votre script.

Bootstrap donne la possibilité d’accomplir des choses soit via `` ou JavaScript droite la plupart du temps.

Answer 5

J’ai cela depuis le code source de la twitterbootstrap et il fonctionne assez bien :

HTML :

CSS :

JS :