TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak stworzyć Bootstrap 5 Scrollspy?

1

Scrollspy to nazwa wskazująca sposób śledzenia lub szpiegowania pozycji treści na podstawie paska przewijania przeglądarki. Chociaż na ogół nie jest to zbyt przydatne w treści, jest to elegancki sposób na pokazanie ruchomego paska pigułki w menu nawigacyjnym. Szczególnie w przypadku szablonów jednostronicowych sensowne jest podświetlanie menu na podstawie pozycji paska przewijania. Bootstrap oferuje w tym celu domyślny komponent o nazwie scrollspy. W tym samouczku przyjrzyjmy się bliżej tworzeniu scrollspy za pomocą Bootstrap 5.

Jak stworzyć Bootstrap 5 Scrollspy?

Przykład Bootstrap 4 Scrollspy

Poniżej przedstawiamy kilka podstawowych potrzeb i funkcji komponentu scrollspy:

  • Scrollspy to wtyczka JavaScript, dlatego powinieneś dołączyć pliki skryptów Bootstrap, aby scrollspy działał.
  • Powinieneś użyć komponentu nav do podświetlenia linków.
  • Poszczególne pozycje menu, a także pozycje w menu rozwijanym są podświetlone.
  • Powinieneś użyć „position: relative;" dla elementu, który ma być śledzony, aby składnik scrollspy działał.
  • W przypadku użycia z elementami innymi niż treść treści (np. section lub div), wysokość i „overflow-y:scroll;” powinny być zdefiniowane wyłącznie.

Scrollspy może być używany z komponentami paska nawigacyjnego i listgroup zarówno w kierunku poziomym, jak i pionowym. Może być również używany w zagnieżdżonej konfiguracji paska nawigacyjnego. Stwórzmy przykładowy scrollspy używając komponentu paska nawigacyjnego.

Tworzenie paska nawigacyjnego

Jak widać w demie, przewijanie zawartości spowoduje podświetlenie odpowiedniej pozycji menu na górze. Najpierw utwórzmy menu za pomocą paska nawigacyjnego i komponentu nav, jak w poniższym kodzie:

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

Pierwszym krokiem jest zidentyfikowanie paska nawigacyjnego z unikalnym identyfikatorem, w tym przypadku użyliśmy id=”scrollspy”. Po drugie, każdy element nawigacyjny powinien być powiązany z unikalnymi identyfikatorami. Tutaj użyliśmy „href=#section1″, „href=#section2″ i „href=#section3″ do śledzenia trzech pozycji menu.

Tworzenie przewijalnej zawartości

Teraz pasek nawigacyjny jest gotowy z unikalnym identyfikatorem wraz z unikalnymi odniesieniami do linków dla każdego elementu menu. Utwórzmy element div zawierający trzy sekcje do śledzenia trzech pozycji 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>

Aby włączyć śledzenie paska nawigacyjnego, powinieneś użyć „data-target=#scrollspy”. Tutaj „#scrollspy” to identyfikator paska nawigacyjnego. Użyliśmy „przepełnienia-y:scroll;” i zdefiniował wysokość jako 800px, aby pokazać pasek przewijania na poziomie elementu div. Wewnątrz nadrzędnego elementu div stwórzmy trzy sekcje. Każda sekcja ma nagłówek h4 z identyfikatorem odpowiadającym identyfikatorom pozycji menu. Na przykład h4 sekcji 1 ma „id=sekcja1″, gdzie sekcja1 jest odnośnikiem do pozycji menu „Sekcja 1″.

Składamy to razem

Połączenie paska nawigacyjnego i elementu div w szablonie startowym Bootstrap stworzy prostą stronę scrollspy.


Dowiedz się o Bootstrapie 5 (Indeks )


Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów