Comment utiliser le nouveau plugin d’affixe dans le bootstrap 2.1.0 de twitter?

La documentation bootstrap sur ce sujet est un peu confuse pour moi. Je veux obtenir un comportement similaire à celui des documents avec la barre de navigation d’affixe: la barre de navigation se trouve sous un en-tête de paragraphe / page et devrait défiler jusqu’à atteindre le haut de la page. .

Comme jsFiddle ne fonctionne pas avec le concept de la barre de navigation, j’ai créé une page distincte à utiliser comme exemple minimal: http://i08fs1.ira.uka.de/~s_drr/navbar.html

Je l’utilise comme ma barre de navigation:

  

Je pense que je voudrais que data-offset-top ait une valeur de 0 (puisque la barre devrait “coller au plus haut”) mais avec 50, il y a au moins un effet observable.

Si aussi mettre le code javascript en place:

   $(document).ready (function (){ $(".navbar").affix (); });  

Toute aide appréciée.

J’avais un problème similaire et je crois avoir trouvé une solution améliorée.

Ne vous souciez pas de spécifier data-offset-top dans votre code HTML. Au lieu de cela, spécifiez-le lorsque vous appelez .affix() :

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

L’avantage est que vous pouvez modifier la disposition de votre site sans avoir à mettre à jour l’atsortingbut data-offset-top . Comme cela utilise la position calculée réelle de l’élément, cela empêche également les incohérences avec les navigateurs qui rendent l’élément légèrement différent.


Vous aurez toujours besoin de fixer l’élément au sumt avec CSS. De plus, je devais définir la width: 100% sur l’élément nav car les éléments .nav avec la position: fixed pour une raison quelconque:

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

Une dernière chose: lorsqu’un élément apposé devient fixe, son élément ne prend plus de place sur la page, ce qui entraîne le “saut” des éléments situés en dessous. Pour éviter cette laideur, j’emballe la barre de navigation dans un div dont la hauteur est égale à la barre de navigation à l’exécution:

  

.

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

Voici le jsFiddle obligatoire pour le voir en action .

Je viens juste de le mettre en œuvre pour la première fois et voici ce que j’ai trouvé.

La valeur de data-offset-top correspond à la quantité de pixels que vous devez faire défiler pour que l’effet d’apposition soit activé. Dans votre cas, une fois que 50px est 50px , la classe de votre article est passée de .affix-top à .affix . Vous voudrez probablement définir data-offset-top à environ 130px dans votre cas d’utilisation.

Une fois ce changement de classe effectué, vous devez positionner votre élément dans css en stylisant le positionnement de la classe .affix . Bootstrap 2.1 définit déjà .affix comme position: fixed; il vous suffit donc d’append vos propres valeurs de position.

Exemple:

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

Pour résoudre ce problème, j’ai modifié le plug-in d’affixe afin d’émettre un événement jQuery lorsqu’un object est apposé ou non.

Voici la requête pull: https://github.com/twitter/bootstrap/pull/4712

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

Et puis faites ceci pour attacher la barre de navigation:

  

Vous devez supprimer .affix() de votre script.

Bootstrap donne la possibilité d’accomplir des choses via data-atsortingbutes ou du code JavaScript, la plupart du temps.

Je l’ai depuis le code source de twitterbootstrap et ça marche plutôt bien:

HTML:

 

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

Il vous suffit de supprimer le script. Voici mon exemple:

 < !DOCTYPE html>        

Merci à namuol et Dave Kiss pour la solution. Dans mon cas, j’ai eu un petit problème avec la hauteur et la largeur de la barre de navigation lorsque j’ai utilisé les plugins Afflix et Collapse. Le problème avec la largeur peut être facilement résolu en l’héritant de l’élément parent (conteneur dans mon cas). Aussi, je pourrais réussir à le faire s’effondrer avec un peu de javascript (coffeescript en fait). L’astuce consiste à définir la hauteur du wrapper sur auto avant que la réduction ne se produise et qu’elle ne soit corrigée après.

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

Ma solution pour attacher la barre de navigation:

 function affixnolag(){ $navbar = $('#navbar'); if($navbar.length < 1) return false; h_obj = $navbar.height(); $navbar .on('affixed', function(){ $navbar.after('
'); }) .on('unaffixed', function(){ if($('#nvfix_tmp').length > 0) $('#nvfix_tmp').remove(); }); }

Semblable à la réponse acceptée, vous pouvez également faire ce qui suit pour tout faire en une seule fois:

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

Cela invoque non seulement le plugin d’ affix , mais va également envelopper l’élément apposé dans un div qui maintiendra la hauteur d’origine de la barre de navigation.