Руководство Bootstrap Scrollspy

1- Bootstrap Scrollspy

Перед тем как дать определение Scrollspy, посмотрите на Scrollspy ниже:

Scrollspy в соответствии со своим именем Scroll + Spy (Прокрутка + Следить). Scrollspyработает на основании 2 компонентов:

Перый компонент это Nav (или List-Group).
Второй компонент это прокручивающаяся (scrollable) зона содержания, которая может быть <body> или <div>,<span>,.... Если зона содержания не является <body>, она должна создать height и overflow-y: scroll.

Принципы работы:

В компоненте 1, пользователь нажимает на Item у Nav (Или List-Group), прокрутка на компоненте 2 будет работать для отображения правильного содержания соответствующего с Item, на который пользователь только что нажал.
В компоненте 2, когда пользователь тянет прокрутку, item у компонента 1, соответствует с содержанием, которое отображается для активации (active).

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Scrollspy</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid">
      <h3>Scrollspy on DIV</h3>
      <hr>
 
      <div class="row">
         <div class="col-4">
            <nav id="myScrollspy">
               <ul class="nav nav-pills flex-column">
                  <li class="nav-item"><a class="nav-link" href="#content-jаvascript">jаvascript</a></li>
                  <li class="nav-item"><a class="nav-link" href="#content-css">CSS</a></li>
                  <li class="nav-item"><a class="nav-link" href="#content-bootstrap">Bootstrap</a></li>
               </ul>
            </nav>
         </div>
         <div class="col-8">
            <div data-spy="scroll" data-target="#myScrollspy" data-offset="10"
                  style="height:200px;overflow-y: scroll;padding:5px; border: 1px solid #ccc;">
               <h4 id="content-jаvascript">jаvascript</h4>
               <p>
                 jаvascript is a cross-platform, object-oriented scripting language used to make webpages interactive
                  (e.x. having complex animations, clickable buttons, popup menus, etc.)...
               </p>
               <h4 id="content-css">CSS</h4>
               <p>
                 CSS is the language for describing the presentation of Web pages, including colors,
                  layout, and fonts. It allows one to adapt the presentation to different types of devices,
                  such as large screens, small screens, or printers...
               </p>
               <h4 id="content-bootstrap">Bootstrap</h4>
               <p>
                 CSS is the language for describing the presentation of Web pages, including colors,
                  layout, and fonts. It allows one to adapt the presentation to different types of devices,
                  such as large screens, small screens, or printers. CSS is independent of HTML
                  and can be used with any XML-based markup language...
               </p>
            </div>
         </div>
       </div>
       <hr>
        Other Contents ...
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

Изучите так же:

2- Scrollspy + BODY

В данном примере я создам Scrollspy для "отслежки" (spy) содержания на <body>. Заметьте, что <body> по-умолчанию уже имеет вертикальную прокрутку (vertical scrollbar), это и есть прокрутка браузера. Ниже на изображение показана структура данного примера:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Scrollspy</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body data-spy="scroll" data-target="#scrollspy-nav" data-offset="110">
      <div class="container-fluid">
 
         <nav id="scrollspy-nav" class="navbar  bg-dark fixed-top">
            <ul class="nav nav-pills">
               <li class="nav-item"><a class="nav-link" href="#content-jаvascript">jаvascript</a></li>
               <li class="nav-item"><a class="nav-link" href="#content-css">CSS</a></li>
               <li class="nav-item"><a class="nav-link" href="#content-bootstrap">Bootstrap</a></li>
            </ul>
         </nav>
 
         <div style="margin-top:100px;">
            <h4 id="content-jаvascript">jаvascript</h4>
            <p>
               jаvascript is a cross-platform, object-oriented scripting language used to make webpages interactive
               (e.x. having complex animations, clickable buttons, popup menus, etc.)...
            </p>
            <h4 id="content-css">CSS</h4>
            <p>
               CSS is the language for describing the presentation of Web pages, including colors,
               layout, and fonts. It allows one to adapt the presentation to different types of devices,
               such as large screens, small screens, or printers...
            </p>
            <h4 id="content-bootstrap">Bootstrap</h4>
            <p>
               CSS is the language for describing the presentation of Web pages, including colors,
               layout, and fonts. It allows one to adapt the presentation to different types of devices,
               such as large screens, small screens, or printers. CSS is independent of HTML
               and can be used with any XML-based markup language...
            </p>
         </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>

{banner_google}

3- Пример со вставленным Nav (Nested Nav)

Scrollspy так же может работать со сплетенными Nav (Nested Navs). Если Nav активирован (active) то родительский Nav так же будет активирован.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Scrollspy</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid">
         <h3>Scrollspy with Nested Navs</h3>
         <hr>
         <div class="row">
            <div class="col-4">
               <nav id="myScrollspy">
                  <ul class="nav nav-pills flex-column">
                     <li class="nav-item">
                        <a class="nav-link" href="#content-frontend">
                        <strong>1- Frontend</strong>
                        </a>
                        <ul class="nav nav-pills flex-column">
                           <li class="nav-item">
                              <a class="nav-link" href="#content-jаvascript"> 1.1- jаvascript</a>
                           </li>
                           <li class="nav-item">
                              <a class="nav-link" href="#content-css"> 1.2- CSS</a>
                           </li>
                           <li class="nav-item">
                              <a class="nav-link" href="#content-bootstrap"> 1.3- Bootstrap</a>
                           </li>
                        </ul>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#content-backend">
                        <strong>2- Backend</strong>
                        </a>
                        <ul class="nav nav-pills flex-column">
                           <li class="nav-item">
                              <a class="nav-link" href="#content-java"> 2.1- Java</a>
                           </li>
                           <li class="nav-item">
                              <a class="nav-link" href="#content-csharp"> 2.2- C#</a>
                           </li>
                        </ul>
                     </li>
                  </ul>
               </nav>
            </div>
            <div class="col-8">
               <div data-spy="scroll" data-target="#myScrollspy" data-offset="10"
                  style="height:300px;overflow-y: scroll;padding:5px; border: 1px solid #ccc;">
                  <h2 id="content-frontend">1. Frontend</h2>
                  jаvascript, CSS, Bootstrap
                  <h4 id="content-jаvascript">1.1. jаvascript</h4>
                  <p>
                     jаvascript is a cross-platform, object-oriented scripting language
                     used to make webpages interactive
                     (e.x. having complex animations, clickable buttons, popup menus, etc.)...
                  </p>
                  <h4 id="content-css">1.2. CSS</h4>
                  <p>
                     CSS is the language for describing the presentation of Web pages,
                     including colors, layout, and fonts.
                     It allows one to adapt the presentation to different types of devices,
                     such as large screens, small screens, or printers...
                  </p>
                  <h4 id="content-bootstrap">1.3. Bootstrap</h4>
                  <p>
                     CSS is the language for describing the presentation of Web pages,
                     including colors, layout, and fonts.
                     It allows one to adapt the presentation to different types of devices,
                     such as large screens, small screens, or printers. CSS is independent of HTML
                     and can be used with any XML-based markup language...
                  </p>
                  <h2 id="content-backend">2. Backend</h2>
                  Java, C#
                  <h4 id="content-java">2.1. Java</h4>
                  <p>
                     Java is a programming language and computing platform first released by Sun Microsystems in 1995.
                     There are lots of applications and websites that will not work unless you have Java installed,
                     and more are created every day. Java is fast, secure, and reliable.
                  </p>
                  <h4 id="content-csharp">2.2. C#</h4>
                  <p>
                     C# is a general object-oriented programming (OOP) language for networking and Web development.
                     C# is specified as a common language infrastructure (CLI) ...
                  </p>
               </div>
            </div>
         </div>
         <hr>
         Other Contents ...
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

4- Пример с List Group

Scrollspy так же работает с List Group. Ниже показан пример:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Scrollspy</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid">
         <h3>Scrollspy with List Group</h3>
         <hr>
         <div class="row">
            <div class="col-4">
               <div class="list-group" id="myScrollspy">
                  <a class="list-group-item" href="#content-jаvascript">jаvascript</a>
                  <a class="list-group-item" href="#content-css">CSS</a>
                  <a class="list-group-item" href="#content-bootstrap">Bootstrap</a>
               </div>
            </div>
            <div class="col-8">
               <div data-spy="scroll" data-target="#myScrollspy" data-offset="10"
                  style="height:200px;overflow-y: scroll;padding:5px; border: 1px solid #ccc;">
                  <h4 id="content-jаvascript">jаvascript</h4>
                  <p>
                     jаvascript is a cross-platform, object-oriented scripting language used to make webpages interactive
                     (e.x. having complex animations, clickable buttons, popup menus, etc.)...
                  </p>
                  <h4 id="content-css">CSS</h4>
                  <p>
                     CSS is the language for describing the presentation of Web pages, including colors,
                     layout, and fonts. It allows one to adapt the presentation to different types of devices,
                     such as large screens, small screens, or printers...
                  </p>
                  <h4 id="content-bootstrap">Bootstrap</h4>
                  <p>
                     CSS is the language for describing the presentation of Web pages, including colors,
                     layout, and fonts. It allows one to adapt the presentation to different types of devices,
                     such as large screens, small screens, or printers. CSS is independent of HTML
                     and can be used with any XML-based markup language...
                  </p>
               </div>
            </div>
         </div>
         <hr>
         Other Contents ...
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию. Это займёт не более минуты. Не волнуйтесь, мы не спамим!

У данной публикации нет комментариев.

admin

Автор

1-08-2020, 13:48

Дата

Учебник Bootstrap

Категория

Комментариев: 0
Просмотров: 558

Учебник Bootstrap

Руководство Bootstrap NavBar

Учебник Bootstrap

Руководство Bootstrap List Group

Учебник Bootstrap

Bootstrap Nav, Tab, Pill

Учебник Bootstrap

Руководство Bootstrap Card

Учебник Bootstrap

Система сеток Bootstrap 4

Украшения для сайта

Новогодние украшения от яндекса

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Чат

nika
4 фев 2023, 18:26

hvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
revapro100
6 ноя 2022, 08:55

скинул в лс п
nika
4 ноя 2022, 17:44

Всем здрасьте))
admin
4 ноя 2022, 11:06

Сайт приобретён новым владельцем для развития и расширения другими скриптами и модулями)
admin
4 ноя 2022, 11:05

@revapro100, Давайте
revapro100
3 ноя 2022, 17:47

Привет! Могу закинуть парочку хороших программ вам
wapstyle
30 окт 2022, 09:01

для связи admin@wapstyle.ru
wapstyle
30 окт 2022, 09:01

Приму в дар или размещу у себя, если у тебя проблемы с оплатой хостинга
blablacar
28 окт 2022, 20:39

Админ, спасибо тебе за старания!
blablacar
28 окт 2022, 20:38

жаль, крутой сайт
admin
7 сен 2022, 17:55

чат в комплекте , чат платный с ключём
admin
4 сен 2022, 13:09

Всем привет ! Продам этот сайт. Нет времени заниматься по вопросам можно тут или в л.с
Nissan Flow
27 авг 2022, 08:55

А как установить приложение Web2App v3.5 - многофункциональное приложения Webview для Android чет не пойму через что открывать подскажите
revapro100
20 авг 2022, 07:32

только прочитал, извиняюсь. Лето - осень в деревне куча суеты. ох! уж эти хостеры!
admin
21 июл 2022, 20:55

@Rocky,
Rocky
21 июл 2022, 11:30

Всем привет
admin
20 июл 2022, 20:52

@revapro100, тихо тихо)) Чуть акк не забанили хостеры))
revapro100
20 июл 2022, 20:14

Всем привет!) Что то так тихо в чате)