Как создать Scrollspy в Bootstrap 5?

Scrollspy — это имя, указывающее способ отслеживания или слежения за позицией контента на основе полосы прокрутки браузера. Хотя, как правило, от этого мало пользы в контенте, это элегантный способ показать движущуюся полосу с таблетками в меню навигации. Особенно в одностраничных шаблонах имеет смысл выделять меню в зависимости от положения полосы прокрутки.

Для этой цели Bootstrap предлагает компонент по умолчанию под названием scrollspy. В этом руководстве мы подробнее рассмотрим создание scrollspy с помощью Bootstrap 5.

Bootstrap 4 Пример Scrollspy

Ниже приведены некоторые из основных потребностей и функций компонента scrollspy:

  • Scrollspy — это плагин JavaScript, поэтому вы должны включить файлы сценария Bootstrap, чтобы scrollspy работал.
  • Вы должны использовать компонент nav для выделения ссылок.
  • Выделяются отдельные пункты меню, а также пункты в раскрывающемся меню.
  • Вам следует использовать «положение: относительное;»Для элемента, который будет отслеживаться для работы компонента scrollspy.
  • При использовании с элементами, отличными от тела содержимого (например, section или div), высота и «переполнение-y: прокрутка;»Следует определять исключительно.

Scrollspy может использоваться с компонентами навигационной панели и списка как в горизонтальном, так и в вертикальном направлениях. Его также можно использовать во вложенной настройке навигационной панели. Давайте создадим пример scrollspy с использованием компонента navbar.

Создание панели навигации

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

<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="https://www.webnots.com/bootstrap-scrollspy-tutorial/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>&nbsp;&nbsp;
</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 = «прокрутка». Во-вторых, каждый элемент навигации должен быть связан с уникальными идентификаторами. Здесь мы использовали «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”- это идентификатор навигационной панели. Мы использовали «переполнение-y: прокрутка;»И определил высоту 800 пикселей, чтобы отображалась полоса прокрутки на уровне элемента div. Внутри родительского элемента div создадим три раздела. Каждый раздел имеет заголовок h4 с идентификатором, соответствующим идентификаторам пунктов меню. Например, h4 раздела 1 имеет «id = section1», Где section1 — ссылка на ссылку для пункта меню«Секция 1».

Собираем все вместе

Объединение панели навигации и элемента div в стартовом шаблоне Bootstrap 4 создаст простую страницу scrollspy.


Изучите Bootstrap 5 (Индекс)


Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.