TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити Bootstrap 5 Scrollspy?

2

Scrollspy – це ім’я, яке вказує на спосіб відстеження або відстеження позиції вмісту на основі смуги прокрутки браузера. Хоча це, як правило, мало користі у вмісті, це елегантний спосіб показати рухливу панель таблеток у меню навігації. Особливо на шаблонах для однієї сторінки є сенс виділити меню на основі положення смуги прокрутки. Bootstrap пропонує для цієї мети компонент за промовчанням під назвою scrollspy. У цьому підручнику давайте детальніше вивчимо створення scrollspy за допомогою Bootstrap 5.

Як створити Bootstrap 5 Scrollspy?

Приклад Bootstrap 4 Scrollspy

Нижче наведено деякі основні потреби та особливості компонента scrollspy:

  • Scrollspy – це плагін JavaScript, тому вам слід включити файли сценаріїв Bootstrap, щоб scrollspy працював.
  • Для виділення посилань слід використовувати компонент nav.
  • Виділяються окремі пункти меню, а також пункти у спадному меню.
  • Ви повинні використовувати "position: relative;" для відстеження елемента для роботи компонента scrollspy.
  • При використанні з іншими елементами, окрім основного вмісту (як-от розділ або div), висота та "overflow-y: scroll;" слід визначити виключно.

Scrollspy можна використовувати з навігаційною панеллю та компонентами групи списків у горизонтальному або вертикальному напрямках. Його також можна використовувати в налаштуваннях вкладеної навігаційної панелі. Створимо приклад scrollspy за допомогою компонента navbar.

Створення Nav Bar

Як ви можете бачити у демонстраційній версії, прокрутка вмісту виділить відповідний пункт меню зверху. Давайте спочатку створимо меню за допомогою навігаційної панелі та компонента навігації, як наведений нижче код:

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

Перший крок – визначити навігаційну панель з унікальним ідентифікатором, у цьому випадку ми використали id = "scrollspy”. По -друге, кожен елемент навігації має бути пов’язаний з унікальними ідентифікаторами. Тут ми використовували “href =#section1”, “href =#section2” та “href =#section3” для відстеження трьох пунктів меню.

Створення вмісту, який можна прокручувати

Тепер панель навігації готова з унікальним ідентифікатором разом з унікальними посиланнями на посилання для кожного пункту меню. Створимо елемент div, що містить три розділи для відстеження трьох пунктів меню.

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

Для того, щоб увімкнути шпигунство панелі навігації, слід використовувати “data-target =#scrollspy”. Тут "#scrollspy" – це ідентифікатор панелі навігації. Ми використовували "overflow-y: scroll;" і визначив висоту як 800 пікселів для відображення смуги прокрутки на рівні елемента div. Усередині батьківського елемента div створимо три розділи. Кожен розділ має заголовок h4 з ідентифікатором, що відповідає ідентифікаторам пунктів меню. Наприклад, h4 розділу 1 має "id = section1", де section1 є посиланням на посилання для пункту меню "Розділ 1".

Поєднавши це разом

Створення панелі навігації та елемента div разом у шаблоні початкового завантаження Bootstrap створить просту сторінку прокрутки.


Вивчити Bootstrap 5 (індекс )


Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі