• Гость
For-Web
  • Главная
  • Вебмастеру
    • Блог
    • SQL
    • PHP
    • JavaScript
    • CSS
    • HTML
    • Литература
  • Скрипты, Soft, APP
    • Bitcoin
    • Соц сети
    • Реклама, Буксы
    • Интернет магагзин
    • Браузерные игры
    • Скрипты хостинга
    • Мобильные приложения
    • Программы
  • Data Life Eingine
    • Модули
    • Хаки
    • DLE шаблоны
  • Bootstrap
    • Шаблоны
    • Плагины
    • Сниппеты
    • Пособие Bootstrap
  • Дизайн и Графика
    • PSD макеты
    • Mocups Free
    • Иконки, Кнопки
    • Шрифты,Текст
    • Текстуры, Фон
    • Анимация
    • Формы
    • Палитра
    • Галерея
    • Раскладка
    • Модальное окно
    • Элементы загрузки
    • Меню и навигация
    • Таблицы
    • Украшения для сайта
    • Фотошоп
  • Шаблоны сайтов
    • WAP шаблоны
    • HTML 5 шаблоны
    • Админка
    • Автомобили
    • Аниме
    • Блоги
    • Бизнес и Финансы
    • Игровые
    • Женские
    • Заглушки
    • Кинопорталы
    • Кулинарные
    • Лендинг
    • Мобильные
    • Музыкальные
    • Новостные
    • ПО, IT
    • Портфолио
    • Природа
    • Строительство
    • Спорт
    • Хостинг
    • Адалт
    • Страницы 404
  • Инфо
    • О проекте
    • Обратная связь
    • Уроки
    • Статистика
    • Privacy Policy
главная » Учебник Bootstrap » Руководство Bootstrap Scrollspy

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


1- Bootstrap Scrollspy

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


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

  1. В компоненте 1, пользователь нажимает на Item у Nav (Или List-Group), прокрутка на компоненте 2 будет работать для отображения правильного содержания соответствующего с Item, на который пользователь только что нажал.
  2. В компоненте 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>

Изучите так же:
  • Руководство Bootstrap Nav, Tab, Pill
  • Руководство Bootstrap List Group


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>

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

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

Вы находитесь на странице скачивания файла. Все скрипты храняться на яндекс диске. Кнопки скачивания файла  находятся внизу страницы. Если нет кнопки  , то значит нет файла. Нет файла - просьба сообщить администратору  любым удобным способом. Спасибо большое за понимание!

Реклама - на страницах сайта, а также на странице загрузки файлов - это вынужденная мера для поддержания проекта на плаву. Я не принуждаю Вас кликать по рекламе, если конечно она вас не заинтересовала.

Да и самое важное, все материалы носят ознакомительный характер, все файлы взяты из открытых источников, соответственно Вы их используете на свой страх и риск. За риски связанные с утечкой данных, хищение средств и прочее при использовании скриптов администрация сайта ответственность не несёт!



  • Комментарии
  • О статье
  • Похожие новости
У данной публикации нет комментариев.

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
                                      Всем привет!) Что то так тихо в чате)
                                      Чтобы оставлять сообщения - зарегистрируйтесь
                                      x
                                      Закрыть Сохранить настройки Сохранить изменения Разбанить Удалить все
                                        Вставить Отмена
                                        Комментарии
                                        Дмитрий Николаев, Уже нет , этот я продал , не хотел , но устал . Так как админ хороший (она) не стала удалять права на
                                        28 декабря 2022 20:07

                                        nika

                                        Дмитрий Николаев, Не за что , с наступающим Вас
                                        28 декабря 2022 20:01

                                        nika

                                        как установить и зайти в админку. Нет файла install.php
                                        26 декабря 2022 23:09

                                        povar

                                        nika, У вас два сайта?
                                        24 декабря 2022 15:24

                                        Дмитрий Николаев

                                        nika,Спасибо! Вроде работает. 
                                        24 декабря 2022 12:31

                                        Дмитрий Николаев

                                        Какой движок самый лучший

                                        • For-WEb.Ru 2018 - 2022  

                                        Авторизация


                                        Регистрация Забыл пароль