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?
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
Vous devez vous connecter pour publier un commentaire.
Malheureusement jQuery tire dans le
data-*
attributs qu'une seule fois lors de la$().data(...)
fonction est appelée pour la première fois. Etscrollspy
ne lit que les options une fois lorsqu'il est initialisé. Lerefresh
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 laoptions.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.
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 dupadding-top
valeur soit la même que la hauteur de la barre de navigation).padding-top
est réglé, et le scrollspyoffset
est modifié pour correspondre. Puis unrefresh
est effectué afin de recalculer le point d'ancrage des décalages.HTML
JavaScript
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 appelerfixSpy()
via unsetInterval(...)
minuterie pour l'exécution de tous les temps.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
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:Note docs sur http://getbootstrap.com/javascript/#scrollspy vous dire quelque chose de semblable:
Ci-dessus, vous obtiendrez quelque chose comme:
NOTE: Le scollspy plugin utilise jQuery scrollTop() fonction pour les calculs. Donc lire ceci: http://blog.jonathanargentiero.com/?p=134.
OriginalL'auteur Bass Jobsen