Il componente Scrollspy consente di creare una navigazione con voci evidenziate man mano che si raggiungono nello scrolling determinati punti della pagina.
L'implementazione del componente prevede due step.
Il primo consiste nella creazione del menu di navigazione. Può essere un menu collegato ad una barra di navigazione, ma anche una struttura di navigazione più semplice e minimalistica. L'importante è che si tratti di menu strutturati secondo le regole di Bootstrap, quindi liste ul con la classe nav e le classi opzionali. I link all'interno dei li devono puntare alle sezioni della pagina collegate.
Il menu/lista deve essere inserito in un elemento nav che abbia associato un id.
Nell'esempio abbiamo:
<nav id="scroll-nav"> <ul class="nav nav-pills"> <li><a href="#par1">Paragrafo 1</a></li> <li><a href="#par2">Paragrafo 2</a></li> <li><a href="#par3">Paragrafo 3</a></li> <li><a href="#par4">Paragrafo 4</a></li> <li><a href="#par5">Paragrafo 5</a></li> <li><a href="#par6">Paragrafo 6</a></li> </ul> </nav>
Nel corpo della pagina (o, come nell'esempio, in un pannello scorrevole) andremo a collocare innanzitutto le sezioni con l'id corrispondente a quello definito nei link di navigazione:
<div id="par1">Lorem ipsum dolor sit amet, consectetur...</div> <div id="par2">Lorem ipsum dolor sit amet, consectetur...</div> <div id="par3">Lorem ipsum dolor sit amet, consectetur...</div> <div id="par4">Lorem ipsum dolor sit amet, consectetur...</div> <div id="par5">Lorem ipsum dolor sit amet, consectetur...</div> <div id="par6">Lorem ipsum dolor sit amet, consectetur...</div>
A livello dell'elemento che racchiude le sezioni indicheremo l'attributo data-spy="scroll" e un attributo data-target da valorizzare con l'id dell'elemento nav che racchiude il menu di navigazione.
Spesso questo elemento sarà il body della pagina:
<body data-spy="scroll" data-target="#scroll-nav">
Nel nostro caso abbiamo applicato gli attributi ad un pannello:
<div id="scroll-panel" data-spy="scroll" data-target="#scroll-nav">
Scorrendo la pagina (o il pannello nel nostro caso), il plugin provvede ad assegnare la classe .active agli item di lista del menu man mano che si raggiunge la sezione corrispondente al link.
Paragrafo 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Paragrafo 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Paragrafo 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Paragrafo 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Paragrafo 5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Paragrafo 6. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Paragrafo 5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.