HTML制作一个可以跟随的引索

可以使用锚点和CSS中的 `position: fixed` 属性来实现一个可以跟随的索引。

首先，在HTML中创建索引的结构。例如：

<div class="index">
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li><a href="#section4">Section 4</a></li>
  </ul>
</div>

<div id="section1">
  <h2>Section 1</h2>
  <p>...</p>
</div>

<div id="section2">
  <h2>Section 2</h2>
  <p>...</p>
</div>

<div id="section3">
  <h2>Section 3</h2>
  <p>...</p>
</div>

<div id="section4">
  <h2>Section 4</h2>
  <p>...</p>
</div>

在上述的 HTML 代码中，我们首先创建了一个包含多个锚点链接的索引，每个链接的 `href` 属性指向页面中的某个具体的 `id` 属性。然后，我们在页面中创建了多个 `div` 元素，每个元素都有一个唯一的 `id` 属性，用于与索引中的锚点链接对应。

接着，在CSS中设置索引的样式，并使用 `position: fixed` 属性将其固定在页面的侧边栏。例如：

.index {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.index ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.index li {
  margin: 0;
}

.index a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333333;
}

最后，通过JavaScript监听页面滚动事件，并根据滚动位置动态更新索引中每个链接的样式。例如：

window.addEventListener('scroll', function() {
  var index = document.querySelector('.index');
  var sections = document.querySelectorAll('div[id^="section"]');
  var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

  for (var i = 0; i < sections.length; i++) {
    var section = sections[i];
    var sectionTop = section.offsetTop - 50;
    var sectionBottom = sectionTop + section.offsetHeight;

    if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
      index.querySelectorAll('a')[i].classList.add('active');
    } else {
      index.querySelectorAll('a')[i].classList.remove('active');
    }
  }
});

在上述的 JavaScript 代码中，我们首先通过 `querySelector` 方法获取到索引的 DOM 元素和页面中所有的 `div` 元素，根据 `id` 属性以 `section` 为前缀进行筛选。然后，在滚动事件的回调函数中，我们遍历所有的 `div` 元素，计算出每个元素的上下边界位置。如果当前页面滚动位置在某个元素的范围内，就通过 `classList.add` 方法添加一个名为 `active` 的类。否则，就通过 `classList.remove` 方法移除这个类。在 CSS 中，我们可以使用这个类来设置索引中当前激活链接的样式。例如：

.index a.active {
  font-weight: bold;
}

这样，就完成了一个基本的可以跟随页面滚动的索引。