TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur man skapar Bootstrap 5 Scrollspy?

1

Scrollspy är namnet för att ange sättet att spåra eller spionera innehållets position baserat på webbläsarens rullningslist. Även om detta i allmänhet inte är särskilt användbart i innehållet, är det ett elegant sätt att visa den rörliga pillerfältet på navigeringsmenyn. Speciellt på mallar på en sida är det meningsfullt att markera menyn baserat på rullningslistens position. Bootstrap erbjuder en standardkomponent som kallas scrollspy för detta ändamål. Låt oss i denna handledning utforska mer om hur du skapar scrollspy med Bootstrap 5.

Hur man skapar Bootstrap 5 Scrollspy?

Bootstrap 4 Scrollspy Exempel

Nedan följer några av de grundläggande behoven och funktionerna i scrollspy -komponenten:

  • Scrollspy är ett JavaScript -plugin, därför bör du inkludera Bootstrap -skriptfiler för att scrollspy ska fungera.
  • Du bör använda navkomponenten för att markera länkarna.
  • Enskilda menyalternativ och även objekt i rullgardinsmenyn markeras.
  • Du bör använda "position: relativ;" för att objektet ska spåras för att scrollspy -komponenten ska fungera.
  • När den används med andra element än innehållet i innehållet (som sektion eller div), höjd och "överflöd-y: rulla;" bör definieras uteslutande.

Scrollspy kan användas med navbar- och listgruppskomponenter både i horisontella eller vertikala riktningar. Det kan också användas i en kapslad navbar -inställning. Låt oss skapa ett exempel scrollspy med hjälp av navbar -komponenten.

Skapar navigeringsfältet

Som du kan se i demoen markerar motsvarande menyalternativ högst upp genom att bläddra i innehållet. Låt oss först skapa en meny med hjälp av navbar och navkomponent som nedanstående kod:

<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>

Första steget är att identifiera nav -fältet med ett unikt id, i det här fallet har vi använt id = "scrollspy”. För det andra bör varje navigationsobjekt kopplas till unika id: er. Här har vi använt “href =#section1”, “href =#section2” och “href =#section3” för att spåra tre menyalternativ.

Skapa rullningsbart innehåll

Nu är navfältet klart med ett unikt id tillsammans med unika länkreferenser för varje menyalternativ. Låt oss skapa ett div -element som innehåller tre sektioner för att spåra de tre menyalternativen.

<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>

För att aktivera spionering av navfältet bör du använda "data-target =#scrollspy". Här är "#scrollspy" id -navigeringsfältet. Vi har använt "overflow-y: scroll;" och definierade höjden som 800px för att visa rullningslisten på div -elementnivån. Låt oss skapa tre sektioner inuti det överordnade div -elementet. Varje sektion har en h4 -rubrik med id som motsvarar menyalternativets id. Till exempel har h4 i avsnitt 1 “id = section1” där avsnitt 1 är länkreferensen för menyalternativet “Section 1”.

Sätta ihop det

Att göra nav -fältet och div -elementet tillsammans på en Bootstrap -startmall skapar en enkel scrollspy -sida.


Lär dig Bootstrap 5 (Index )


Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer