Bootstrap 3.0 scrollspy sensible décalages

Je vais essayer d'obtenir Bootstrap est scrollspy fonctionne de manière fiable sur un site responsive sur lequel la barre de navigation en haut de la hauteur change en fonction de la largeur du support/navigateur. Ainsi, au lieu de coder en dur le décalage sur le data-offset attribut je suis de manière dynamique à l'aide de Javascript initialisation comme ceci:

$('body').scrollspy({ offset: 70, target: '#nav' });

Pour l'échelle des mises en page (c'est à dire Bootstrap-lg) il fonctionne très bien mais pour plus étroite dispositions il semble y avoir une "accumulation" effet de l'offset. En d'autres termes, il fonctionne très bien pour la première partie, mais prend alors l'augmentation de pixels pour activer les suivantes (par exemple 90px pour la prochaine, 110px pour la 3ème, etc.).

J'ai essayé la manipulation de la scrollspy objet directement comme indiqué dans cette réponse:
Comment puis-je régler l'offset pour ScrollSpy dans le Bootstrap? mais en vain.

Quelqu'un peut-il recommander une manière canonique de la mise en œuvre de scrollspy dans un site responsive où le décalage varie en fonction de la largeur du support?

Informations Supplémentaires:

J'ai juste analysé les scrollspy objet dans les deux scénarios, et il s'avère que la liste des décalages est différent lorsqu'il est initialisé par data- attributs uniquement vs via JS. Il semble que lorsque je l'initialiser via JS, les décalages tableau est renseigné avant de certains de BS ajustements adaptés arriver et, par conséquent, les hauteurs sont différentes. Comment puis-je déclencher scrollspy d'initialisation du après toutes les choses sensibles a courir? Est-il un crochet/rappel après BS se fait en ajustant la mise en page? Est JS même ou est toutes les choses sensibles manipulés par le CSS?

Fait intéressant, si je laisse scrollspy s'initialiser à partir de la data- attributs, il fonctionne très bien. Seulement quand je le fais à partir de Javascript puis-je obtenir le "accumuler" effet décalé. En quelque sorte, l'initialisation de scrollspy JS comme dans l'extrait ci-dessus n'est pas équivalente à la laisser faire à partir de la data- attributs. N'ont pas compris pourquoi encore.
La réactivité est gérée par CSS (sauf si vous avez respond.js dans IE8 pour la compatibilité). Êtes-vous d'emballer votre code js à l'intérieur du document prêt gestionnaire?
Oui, je suis d'appeler $('body').scrollspy({...}) à l'intérieur de $(document).ready(function() {. Mais comme je l'ai mentionné ci-dessus, cette façon de faire crée un ensemble différent de décalages par rapport à la laisser s'initialiser par lui-même avec le data- attributs.
peut-être que le $(document).ready faire la différence ici. Le plugin $(window).on('load' pour définir les attributs data -. Voir aussi: stackoverflow.com/questions/4395780/...
Je pense que vous avez raison, c'est probablement la clé. Selon ce commentaire, $(document).ready arrive plus tôt (souvent beaucoup plus tôt) que le$(window) charge de l'événement. Il est donc très probable que les hauteurs n'ont pas été entièrement réglé encore. Une option est d'essayer d'accrocher les décalages sur le dernier rappel de la place, mais à ce point, j'ai opté pour une approche complètement différente, en ajustant CSS padding, etc. Merci à vous tous pour votre aide et vos idées.

OriginalL'auteur Ike | 2013-08-14

17

Malheureusement jQuery tire dans le data-* attributs qu'une seule fois lors de la $().data(...) fonction est appelée pour la première fois. Et scrollspy ne lit que les options une fois lorsqu'il est initialisé. Le refresh fonction de scrollspy ne recharge pas l'une des options. L'appel de $(..).scrollspy(...) de nouveau sur le même élément ignore toutes les nouvelles options de données (utilise précédemment initialisé valeurs).

Cependant, scrollspy ne stocker les valeurs des options dans les éléments de données sous la clé 'bs.scrollspy'. Ainsi, vous pouvez modifier la options.offset champ à l'intérieur de cette clé de données.

Pour tenir compte de l'évolution dynamique de barre de navigation de la hauteur et de la nécessité de modifier le scrollspy valeur de décalage, vous pouvez utiliser l'exemple suivant pour une hauteur variable fixe haut navbar.

La suite fait un peu de choses.
- Il initialise scrollspy via javascript (après la window.load événement se déclenche), et commence avec un décalage de la barre de navigation de la hauteur actuelle (règle également le corps du padding-top valeur soit la même que la hauteur de la barre de navigation).
- Événements de redimensionnement sont surveillés et du corps padding-top est réglé, et le scrollspy offset est modifié pour correspondre. Puis un refresh est effectué afin de recalculer le point d'ancrage des décalages.
HTML
```
<body>
  <style type="text/css">
    /* prevent navbar from collapsing on small screens */
    #navtop .navbar-nav > li { float: left !important; }
  </style>
  <nav id="navtop" class="navbar-fixed-top" role="navigation">
    <div class="container">
      <ul class="nav nav-pills navbar-nav">
        <li><a href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
      ... some more navlinks, or dynamically added links that affect the height ...
      </ul>
    </div>
  </nav>
  <section id="one">
   ...
  </section>
  <section id="two">
   ...
  </section>
  <section id="three">
   ...
  </section>
   ....
</body>
```
JavaScript
```
$(window).on('load',function(){
    var $body   = $('body'), 
        $navtop = $('#navtop'),
        offset  = $navtop.outerHeight();

    //fix body padding (in case navbar size is different than the padding)
    $body.css('padding-top', offset);
    //Enable scrollSpy with correct offset based on height of navbar
    $body.scrollspy({target: '#navtop', offset: offset });

    //function to do the tweaking
    function fixSpy() {
        //grab a copy the scrollspy data for the element
        var data = $body.data('bs.scrollspy');
        //if there is data, lets fiddle with the offset value
        if (data) {
            //get the current height of the navbar
            offset = $navtop.outerHeight();
            //adjust the body's padding top to match
            $body.css('padding-top', offset);
            //change the data's offset option to match
            data.options.offset = offset;
            //now stick it back in the element
            $body.data('bs.scrollspy', data);
            //and finally refresh scrollspy
            $body.scrollspy('refresh');
        }
    }

    //Now monitor the resize events and make the tweaks
    var resizeTimer;
    $(window).resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(fixSpy, 200);
    });
});
```
Et c'est tout. Pas joli, mais cela fonctionne bien. Mon code HTML ci-dessus mai besoin de quelques ajustements.

Si vous ajoutez des éléments à votre barre de navigation de manière dynamique, vous aurez besoin de faire appel fixSpy() après ils sont insérés. Ou vous pouvez appeler fixSpy() via un setInterval(...) minuterie pour l'exécution de tous les temps.

Grande, il a travaillé, mais pourquoi le setTimeout()? J'ai essayé similaire correctifs, seulement pour trouver que par le temps que mon JS s'agit de changer le décalage dans l'objet de données, il n'existe pas encore. Mais à l'aide de votre code semble aller faire un tour.
Le setTimeout est utilisé pour "de-bounce/gaz" à l'explosion de redimensionner les événements que le navigateur déclenche que la fenêtre est redimensionnée. Sans le set timeout, selon le navigateur, le redimensionnement de la fenêtre peut devenir lent pour les grandes document de la taille.
Ce qui est étonnant. J'étais à la recherche forever - merci!!

OriginalL'auteur Troy Morehouse
2

Scrollspy de définir une liste de cibles et /ou de décalage après l'initialisation. Si vous redimensionnez votre écran scrollspy n'est pas initialisé à nouveau. Vous devrez recharger votre page pour recalculer les décalages.

La "accumuler" effet de l'offset que vous mentionnez est cause par la même liste de décalages avec un contenu différent hauteurs.

Peut également déclencher ce recharger avec $(window).resize() remarque certains navigateur feu deux fois, voir https://stackoverflow.com/a/4298653/1596547 une solution:
```
var id; 

$(window).resize(function() 
{
    clearTimeout(id);
    id = setTimeout($('body').scrollspy({ target: '' }), 500);
});
```
Note docs sur http://getbootstrap.com/javascript/#scrollspy vous dire quelque chose de semblable:

"Lors de l'utilisation de scrollspy en conjonction avec l'ajout ou la suppression de
les éléments du DOM, vous aurez besoin d'appeler la méthode refresh "

Ci-dessus, vous obtiendrez quelque chose comme:
```
var id; 

$(window).resize(function() 
{
    clearTimeout(id);
    id = setTimeout($('[data-spy="scroll"]').each(function () {var $spy = $(this).scrollspy('refresh'}), 500);
});
```
NOTE: Le scollspy plugin utilise jQuery scrollTop() fonction pour les calculs. Donc lire ceci: http://blog.jonathanargentiero.com/?p=134.

Merci pour la il a réponse détaillée et des informations de la Basse. Dans mon cas, cependant, les DOM ne change pas et la fenêtre n'est pas redimensionnée. J'ai juste une barre de navigation qui est rendu avec des hauteurs différentes pour différentes largeurs de fenêtre d'affichage. Donc, si vous chargez la page sur un écran de bureau, la barre de navigation est 90px de haut. Sur un iPad, ce sera 70 pixels de haut et pour les smartphones, il sera 60px. Tout cela se fait avec responsive CSS. J'ai donc besoin de configurer scrollspy avec des positions différentes pour chacun de ces scénarios. Faire du JS est un échec avec le problème que j'ai décrit ci-dessus.

OriginalL'auteur Bass Jobsen

Vous devez vous connecter pour publier un commentaire.

HTML

JavaScript