TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare Bootstrap 5 Scrollspy?

5

Scrollspy è il nome che indica il modo per tracciare o spiare la posizione del contenuto in base alla barra di scorrimento del browser. Sebbene questo non sia generalmente di grande utilità all’interno del contenuto, è un modo elegante per mostrare la barra della pillola in movimento nel menu di navigazione. Soprattutto sui modelli a pagina singola, ha senso evidenziare il menu in base alla posizione della barra di scorrimento. Bootstrap offre un componente predefinito chiamato scrollspy per questo scopo. In questo tutorial esploriamo di più sulla creazione di scrollspy usando Bootstrap 5.

Come creare Bootstrap 5 Scrollspy?

Bootstrap 4 Scrollspy Esempio

Di seguito sono riportate alcune delle esigenze e delle funzionalità di base del componente scrollspy:

  • Scrollspy è un plugin JavaScript, quindi dovresti includere i file di script Bootstrap affinché lo scrollspy funzioni.
  • Dovresti usare il componente nav per evidenziare i collegamenti.
  • Le singole voci di menu e anche le voci all’interno del menu a discesa sono evidenziate.
  • Dovresti usare "position: relative;" per l’elemento da tracciare affinché il componente scrollspy funzioni.
  • Se utilizzato con elementi diversi dal corpo del contenuto (come section o div), l’altezza e "overflow-y:scroll;" dovrebbe essere definito esclusivamente.

Scrollspy può essere utilizzato con i componenti della barra di navigazione e dei gruppi di elenchi sia in direzione orizzontale che verticale. Può anche essere utilizzato in una configurazione nidificata della barra di navigazione. Creiamo un esempio scrollspy usando il componente navbar.

Creazione della barra di navigazione

Come puoi vedere nella demo, scorrendo il contenuto si evidenzierà la voce di menu corrispondente in alto. Creiamo prima un menu usando la barra di navigazione e il componente di navigazione come il codice seguente:

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-warning" id="scrollspy"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="index.html"> <img src=" logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo"> Bootstrap 4 Demo Site</a> <ul class="nav nav-pills mr-auto ml-auto"> <li class="nav-item"><a class="nav-link" href="#section1">Section 1</a></li> <li class="nav-item"><a class="nav-link" href="#section2">Section 2</a></li> <li class="nav-item"><a class="nav-link" href="#section3">Section 3</a></li>   </ul> <!-- Start Search --> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> <!-- End Search --> </nav>

Il primo passo è identificare la barra di navigazione con un ID univoco, in questo caso abbiamo usato id="scrollspy”. In secondo luogo, ogni elemento di navigazione dovrebbe essere collegato a ID univoci. Qui abbiamo usato "href=#section1", "href=#section2" e "href=#section3" per tenere traccia di tre voci di menu.

Creazione di contenuti scorrevoli

Ora la barra di navigazione è pronta con un ID univoco insieme a riferimenti di collegamento univoci per ciascuna voce di menu. Creiamo un elemento div contenente tre sezioni per tenere traccia delle tre voci di menu.

<div data-spy="scroll" data-target="#scrollspy" data-offset="0" style="overflow-y: scroll; height: 800px; position:relative;"> <section class="sec1"> <h4 id="section1">Section 1</h4> <p>Here is a content for section 1.</p> <p>"Here is your content for section 1. Enter long content for covering 800px height".</p></section> <section class="sec2"> <h4 id="section2">Section 2</h4> <p>Here is a content for section 2.</p> <p>"Here is your content for section 2. Enter long content for covering 800px height".</p> </section> <section class="sec3"> <h4 id="section3">Section 3</h4> <p>Here is a content for section 3.</p> <p>"Here is your content for section 3. Enter long content for covering 800px height".</p> </section> </div>

Per abilitare lo spionaggio della barra di navigazione, dovresti usare "data-target=#scrollspy". Qui "#scrollspy" è l’id della barra di navigazione. Abbiamo usato "overflow-y:scroll;" e definito l’altezza come 800 px per mostrare la barra di scorrimento a livello dell’elemento div. All’interno dell’elemento div genitore, creiamo tre sezioni. Ogni sezione ha un’intestazione h4 con l’id corrispondente agli ID della voce di menu. Ad esempio, h4 della sezione 1 ha "id=sezione1" dove sezione1 è il riferimento del collegamento per la voce di menu "Sezione 1".

Mettendolo insieme

Rendere la barra di navigazione e l’elemento div insieme su un modello di avvio Bootstrap creerà una semplice pagina scrollspy.


Impara Bootstrap 5 (Indice )


Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More