Comment obtenir des données dynamiques-valeurs de décalage pour Bootstrap 3 apposer méthode

Vous pouvez utiliser jQuery pour obtenir le contenu dynamique de la hauteur au-dessus de la navbar. Par exemple:

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

De travail de démonstration: http://bootply.com/69848

Dans certains cas, compenser.fond doit également être calculée pour déterminer le moment "de l'onu-affixe" de l'élément. Voici un exemple d'apposer-bas

ThomasReggi de données-smart-apposer ne fonctionne pas pour moi dans certains cas particuliers (quand la taille du document, ou lorsque le apposée sur la colonne était trop haut). Mais il m'a donné une idée simple: Ajouter un élément vide avant de le apposé sur le contenu, et l'utiliser pour obtenir le décalage. Fonctionne bien lorsqu'il est redimensionné.

Pendant que j'y étais, j'ai également régler la largeur de l'élément, il est naturel que la largeur du parent d'origine. Voici ma solution:

$('[data-affix-after]').each( function() {
  var elem = $(this);
  var parent_panel = elem.parent();
  var prev = $( elem.data('affix-after') );

  if( prev.length != 1 ) {
    /* Create a new element immediately before. */
    prev = elem.before( '<div></div>' ).prev();
  }

  var resizeFn = function() {
      /* Set the width to it's natural width in the parent. */
      var sideBarNavWidth = parent_panel.width()
          - parseInt(elem.css('paddingLeft'))
          - parseInt(elem.css('paddingRight'))
          - parseInt(elem.css('marginLeft'))
          - parseInt(elem.css('marginRight'))
          - parseInt(elem.css('borderLeftWidth'))
          - parseInt(elem.css('borderRightWidth'));
      elem.css('width', sideBarNavWidth);

      elem.affix({
          offset: {
              top: prev.offset().top + prev.outerHeight(true),
              bottom: $('body>footer').outerHeight(true)
          }
      });
  };

  resizeFn();
  $(window).resize(resizeFn);
});

Le code HTML qui va avec c'est:

<div id='before-affix'></div><!-- leave this empty -->
<div data-affix-after='#before-affix'>
    Put content to affix here.
</div>

ou

<div data-affix-after='#create'><!-- any ID that doesn't exist -->
    Put content to affix here.
</div>

Le nécessaire CSS est:

.affix { top: 0px },
.affix-bottom { position: absolute; }

Si vous souhaitez désactiver apposer (par exemple, lorsque la colonne de droite est empilé), puis utilisez le CSS:

.affix, .affix-bottom { position: static; }

à l'intérieur de la couverture médiatique de la requête.

GI

Skelly ci-dessus est droite et il n'y a pas de meilleure façon de le faire. La seule solution possible avec les "indigènes" bootstrap consiste à attacher les apposer options avec un appel JavaScript (comme mentionné ci-dessus dans https://stackoverflow.com/a/18702972/2546679).

Il est particulièrement pas possible d'utiliser le data-offset attribut pour obtenir le même effet (même si ce serait beaucoup plus pratique, et même si la documentation pour Apposer à http://getbootstrap.com/2.3.2/javascript.html#affix suscite l'espoir on pourrait le faire).

On peut donc écrire

data-offset='{"top":42}'

mais on est pas le droit d'écrire par exemple:

data-offset='{"top":$("#banner").height()}'

La raison en est que les attributs de données sont analysées à travers le JQuery .data() API qui permet seulement une pure JSON valeurs pour être analysé, voir https://api.jquery.com/data/.

J'ai eu beaucoup de mal avec cela plus tôt, et pour une raison que je ne pouvais pas obtenir toutes les solutions d'autres personnes avaient suggéré de travailler. Je suis relativement nouveau à la méthode Bootstrap et JQuery, j'étais donc probablement faire quelque chose de vilain, je n'étais pas à l'attraper. Peu importe, j'ai trouvé une solution qui fonctionne vraiment bien, même si elle n'est pas, à strictement parler, l'utilisation de l'apposer des fonctionnalités comme Bootstrap entend. J'ai gardé mon #thisElement.affix {top: desiredFixedPosition;} CSS intacte, mais se débarrasser de la data-spy et data-offset-top attributs de #thisElement de la balise HTML. J'ai ensuite codé en dur dans ce JQuery:

var newAffix = function() {
    if($("otherElementsAboveThisElement").height() <= $(window).scrollTop()) {
        $("#thisElement").addClass("affix");
    } else {
        $("#thisElement").removeClass("affix");
    }
}

$(document).ready(function() {
    $(window).resize(newAffix);
    $(window).scroll(newAffix);
}

Autant que je l'ai testé, cela fonctionne indépendamment de la façon dont beaucoup vous redimensionner la page ou faites défiler la page, et si vous faites preuve de créativité dans la façon dont vous l'appelez dans le $(document).ready() fonction vous pourriez même avoir le menu de rester dans la bonne position durant la hauteur des animations. Comme indiqué, ce n'est pas techniquement un entièrement "Bootstrap" approuvé solution, mais il s'intègre assez bien dans un Bootstrap site que cela devrait fonctionner pour certains 🙂