Fichier de code source:
Scrollspy.js
Implémenter les fonctions
1.
2. La navigation doit être .nav> li> une structure, et le hachage sur un HREF ou un cible de données doit être lié au hashkey
3. Il doit y avoir du style .nav sur le menu
4. Le cible des données dans la zone de défilement doit être cohérent avec l'ID de parent de navigation (doit être le parent)
<div id = "Selector"> <ul> <li> <a href = "# one"> un </a> </li> <li> <a href = "# deux"> Two </a> </li> <li> <a href = "# trois"> trois </a> </li> </ul> </v> <div data-spy = "Scroll" Data-Target = "Selector" # # # #; débordement: caché; débordement-y: auto; " > <h4 id = "one"> ibe </h4> <p> un contenu spécifique <br/> un contenu spécifique <br/> un contenu spécifique <br/> un contenu spécifique <br/> </p> <h4 id = "Two"> deux </h4> <p> un contenu spécifique <br/> Un contenu spécifique <br/> </p> <h4 id = "trois"> trois </h4> Contenu <br/> </p> <h4 id = "trois"> trois </h4> <p> Un contenu spécifique <br/> Un contenu spécifique <br/> </p> <h4 id = "trois"> trois </h4> <p> un contenu spécifique <br/> Un contenu spécifique <br/> Un contenu spécifique <br/> </p>
Analyse du code source:
1. Principe: Lorsque la position du hachage dans le conteneur de défilement n'est que la valeur définie par décalage en haut du conteneur, la mise en évidence HREF correspondante dans la navigation sera définie.
2. Si la zone de défilement est un corps, l'élément de la zone de défilement sera marqué comme une fenêtre (jugée dans le constructeur)
this. $ ScrollerElement = $ (élément) .is (document.body)? $ (fenêtre): $ (élément)
3. GetcrolHeight: Obtenez la hauteur du contenu du conteneur de défilement (y compris la partie cachée)
this. $ Scrollement [0] .ScrollHeight || Math.max (this. $ Body [0] .scrollHeight, document.documentElement.scrollHeight)
4. actualiser: actualiser et stocker les valeurs de chaque hachage dans le conteneur de défilement
4.1. Utilisez le décalage pour obtenir la valeur de positionnement par défaut. Si la zone de défilement n'est pas une fenêtre, utilisez la position pour l'obtenir.
if (! $. Iswindow (this. $ ScrollerElement [0])) {offSetMethod = 'position' offsetbase = this. $ scrollement.scrolltop () // obtenez la hauteur de base, s'il y a du contenu dans la zone de défilement qui ne participe pas à la calcul de défilement}4.2. Selon le Hashkey sur la navigation, la traversée et l'obtention de la valeur de décalage correspondant au Hashkey dans la zone de défilement:
this. $ body .find (this.selector) .map (function () {var $ el = $ (this) var href = $ el.data ('cible') || $ el.attr ('href') var $ href = /^#./.test(href) && $ (href) // reçoit l'élément correspondant à l'Hashke $ href.length && $ href.is (': visible') && [[$ href [offsetMethod] (). Top + Offsetbase, href]]) || that.targets.push (this [1])})5. Processus: La fonction de déclenchement de l'événement de barre de décrette est utilisée pour calculer le menu de navigation doit être mis en surbrillance actuellement
5.1. Obtenez la distance de défilement du conteneur de défilement:
var scrolltop = this. $ ScrollerElement.scrollTop () + this.options.offset
5.2. La hauteur maximale que le récipient roulant peut rouler
// Hauteur de défilement maximum = Distance de réglage de défilement (décalage) + Hauteur du contenu du conteneur de défilement - Hauteur de réglage du conteneur de défilement var maxscroll = this.options.offset + ScrollHeight - this. $ Scrollelement.Height ()
5.3. Définir la logique des éléments de défilement:
pour (i = offSets.length; i--;) {// transférer tous les offset activeTarget! = cibles [i] // juger si la cible actuelle est égale à ActiveTarget && scrolltop> = offsets [i] // hight hight> offset && (offSets [i + 1] === indéfinie || L'élément i + 1 n'est pas supérieur à la hauteur de défilement && this.activate (cibles [i]) // Définit I en tant qu'élément actif actuel}6. Actif: Définissez le menu de navigation spécifié pour mettre en surbrillance
7. Clear: clairement tous les menus mis en évidence
L'article ci-dessus discutant brièvement de l'analyse du code source bootstrap ScrollSpy (écoute de défilement) est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.