Bootstrap 4 – Scrollspy

Bootstrap Scrollspy giúp bạn làm nổi bật menu của phần nội dung tương ứng dựa vào vị trí thanh cuộn.

Scrollspy Example

Ở ví dụ này, khi bạn kéo thanh cuồn theo nội dung, phần menu sẽ highlight ứng với nội dung của nó.

<!DOCTYPE html>
<html lang="en">

  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>


  <div class="container">
    <nav id="scrollspy-nav" class="navbar navbar-default">
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" href="#bast">Bast</a>
        <li class="nav-item">
          <a class="nav-link" href="#brogan">Brogan</a>
        <li class="nav-item">
          <a class="nav-link" href="#calceology">Calceology</a>
    <article data-spy="scroll" data-target="#scrollspy-nav" data-offset="0" style="overflow: scroll; width: 60vw;height: 70vh;font-size: 4vw;">
      <h4 id="bast">Bast Shoes</h4>
      <p>Bast shoes are shoes made primarily from bast (fiber from the bark of the linden tree or birch tree). They are a kind
        of basket, woven and fitted to the shape of a foot. Bast shoes are an obsolete traditional footwear of the forest
        areas of Northern Europe, formerly worn by poorer members of the Finnic peoples, Balts, and East Slavs. They were
        easy to manufacture, but not durable.</p>
      <h4 id="brogan">Brogan</h4>
      <p>Brogan-like shoes, called "brogues", were made and worn in Scotland and Ireland as early as the 16th century, and the
        shoe-type probably originated there.</p>
      <h4 id="calceology">Calceology</h4>
      <p>Calceology is the study of footwear, especially historical footwear whether as archaeology, shoe fashion history, or
      <p>Calceology comprises the examination, registration, research and conservation of leather shoe fragments.</p>
      <p>However, calceology is not yet formally recognized as a field of research. </p>