Modification de bootstrap de Twitter affixe offset

J’ai un site où je veux “navigation secondaire”. Ainsi, lorsque vous faites défiler une section, sa barre d’outils est apposée sous la barre d’outils principale. J’ai ce travail, mais je ne peux pas changer l’offset supérieur après l’initialisation. Les docs disent:

affixe (‘rafraîchir’)

Lorsque vous utilisez affix en conjonction avec l’ajout ou la suppression d’éléments du DOM, vous voudrez appeler la méthode de rafraîchissement:

mais quand j’essaie, je reçois:

Uncaught TypeError: Object # n’a pas de méthode ‘refresh’

Voici mon code:

$(function () { $('.sec-nav').addClass("affix-top"); var adjustNavs = function (first) { $('.sec-nav').each(function (){ var $p = $(this).closest('.sec'); var $$ = $p.prevAll('.sec'); console.log($$); var h = 0; $$.each(function () { h+=$(this).outerHeight();}); console.log(h); if (first) { $(this).affix({offset: {top: h}}); } else { $(this).data('affix', {b: {options: {offset:{top: h}}}}); console.log(this); $(this).affix('refresh') } }); } adjustNavs(true); $('.sec').bind('DOMSubtreeModified', function () { adjustNavs(); }); });

J’ai essayé différentes variantes de

  $(this).data('affix', {b: {options: {offset:{top: h}}}});

comprenant:

  $(this).affix({offset: {top: h}});

Je ne peux pas obtenir le décalage pour changer. Comment modifiez-vous l’offset du plugin affix? Merci.

Je l’ai compris. Au lieu de mettre à jour le décalage de manière dynamic, j’ai changé la valeur du décalage en une fonction:

 $(function () { $('.sec-nav').addClass("affix-top").each(function (){ var $self = $(this); var offsetFn = function () { var $p = $self.closest('.sec'); var $$ = $p.prevAll('.sec'); var h = 0; $$.each(function () { h+=$(this).outerHeight();}); return h; } $self.affix({offset: {top: offsetFn}}); }); });

Désormais, lorsqu’une section change en raison de la manipulation du dom ou du redimensionnement de la fenêtre, le décalage est automatiquement modifié en raison du changement de valeur des fonctions.

J’ai simplifié légèrement la réponse de Fatmuemoo pour un cas plus élémentaire: la barre de navigation de ma page d’accueil (le bootstrap par défaut #masthead) est située sous un grand curseur d’arrière-plan portant l’identifiant #bg. La hauteur du curseur varie avec 3 points d’arrêt CSS. Nous venons de définir le décalage de la tête de tête pour qu’il corresponde à la hauteur du curseur. Facile!

  $('header#masthead').affix({ //sticky header at bottom of bg offset: { top: function(){return $("#bg").outerHeight();} } });

que diriez-vous:

  $(window).off('.affix'); $("#ID_NAME") .removeClass("affix affix-top affix-bottom") .removeData("bs.affix"); $('#ID_NAME').affix({ offset: { top: OTHER_VALUE } });