Comment utiliser le nouveau apposer plugin de twitter bootstrap 2.1.0?

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

Ne prennent la peine de préciser 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 le data-offset-top 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% sur l'élément nav depuis .nav éléments avec position: fixed se conduisent mal pour une raison:

#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 dans un 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.

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>

J'ai obtenu ce à partir de la twitterbootstrap du code source, et ça fonctionne plutôt bien:

HTML:

<div class="row">
    <div class="span3 bs-docs-sidebar">
        <ul id="navbar" class="nav nav-list bs-docs-sidenav">
            ...
        </ul>
    </div>
</div>

CSS:

.bs-docs-sidenav {
    max-height: 340px;
    overflow-y: scroll;
}

.affix {
    position: fixed;
    top: 50px;
    width: 240px;
}

JS:

$(document).ready(function(){
    var $window = $(window);
    setTimeout(function () {
        $('.bs-docs-sidenav').affix({
            offset: {
                top: function (){
                    return $window.width() <= 980 ? 290 : 210
                }
            }
        })
    }, 100);
});

Grâce à namuol et Dave Baiser pour la solution.
Dans mon cas, j'ai eu un petit problème avec la barre de navigation de la hauteur et la largeur lorsque j'ai utilisé afflix et de l'effondrement des plugins ensemble. Le problème avec la largeur peut être facilement résolu hérite de l'élément parent (conteneur dans mon cas). De même, j'ai réussi à faire s'effondrer en douceur avec un peu de javascript (coffeescript en fait). Le truc est de mettre wrapper hauteur de auto avant l'effondrement de la bascule se produit et le corriger en arrière par la suite.

De balisage (haml):

#wrapper
  #navbar.navbar
    .navbar-inner
      %a.btn.btn-navbar.btn-collapse
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar

      #menu.nav-collapse
        -# Menu goes here

CSS:

#wrapper {
  width: inherit;
}

#navbar {
  &.affix {
    top: 0;
    width: inherit;
  }
}

Coffeescript:

class Navigation
  @initialize: ->
    @navbar = $('#navbar')
    @menu = $('#menu')
    @wrapper = $('#wrapper')

    @navbar.affix({offset: @navbar.position()})
    @adjustWrapperHeight(@navbar.height())

    @navbar.find('a.btn-collapse').on 'click', () => @collapse()

    @menu.on 'shown', () => @adjustWrapperHeight(@navbar.height())
    @menu.on 'hidden', () => @adjustWrapperHeight(@navbar.height())

  @collapse: ->
    @adjustWrapperHeight("auto")
    @menu.collapse('toggle')

  @adjustWrapperHeight: (height) ->
    @wrapper.css("height", height)

$ ->
  Navigation.initialize()

Similaire à la accepté de répondre, vous pouvez aussi faire quelque chose comme ce qui suit à faire tout en un seul aller:

$('#nav').affix({
  offset: { top: $('#nav').offset().top }
}).wrap(function() {
  return $('<div></div>', {
    height: $(this).outerHeight()
  });
});​

Ce n'est pas seulement invoque le affix plugin, mais également envelopper le apposé élément dans une div qui va maintian la hauteur d'origine de la barre de navigation.