انتقل إلى محتوى الدرس

Scrollspy Vertical Menu

ستتعلم في هذا الدرس ال Scrollspy وهو يحدث الروابط تلقائيًا في ال Navbar بناءً على مكان ال Scroll في الصفحة بواسطة ال Bootstrap 

1 صفوف تعليمية
Bootstrap
2,029 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في هذا المثال طريقة عمل ال Scrollspy بشكل رأسي بداخل ال navbar

HTML
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">

  <div class="container-fluid">
    <div class="row">
      <nav class="col-sm-3 col-4" id="myScrollspy">
        <ul class="nav nav-pills flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#section1">Section 1</a>
          </li>
          ...
        </ul>
      </nav>
      <div class="col-sm-9 col-8">
        <div id="section1">
          <h1>Section 1</h1>
          <p>Try to scroll this page and look at the menu while scrolling!</p>
        </div>
        ...
      </div>
    </div>
  </div>

</body>

جميع فقرات هذا الدرس (Bootstrap 4 Scrollspy)