javascript - 将标题放在顶部一个下面，类似于页面索引

Question

当用户滚动时，我需要将内容的标题放在最上面的一个下面。现在我已经使用了 bootstrap Scrollspy。哪个效果很好，但我需要在其中包含以下内容。 Here is the codepen link. . (未在 SO 编辑器中添加代码，因为在编辑器中显示移动 View 。)

1. 目前，2 个标题出现在屏幕上，一个在导航栏内，另一个来自内容。
2. 标题应该一个接一个地放在另一个下面，就好像它是页面的索引一样。
3. 当用户点击任何标题时，页面应该滚动到该内容(这是在 Scrollspy 中实现的，但目前只显示具有 .active 类的标题)。

我知道编写自定义 JS 对我来说会花费一些时间(这对我来说是最后的选择)。我试着用谷歌搜索这个，但大多数插件都类似于 Scrollspy。

我可以为此安装任何插件或者 Scrollspy 中的任何简单更改也可以。

Answer 1

我想这就是您要找的。如果您需要任何其他更改，请告诉我。

$(document).ready(function() {
  var navHeight, activeLiCount, activeLiHeight;
  $(document).on("scroll", onScroll);

  function onScroll(event) {
    var previousScrollTop = 0,
      scrollLock = false,
      scrollPos = $(document).scrollTop() + $(".nav").height();
    $(".nav a").each(function() {
      var currLink = $(this),
        refElement = $(currLink.attr("href"));
      if (refElement.position().top <= scrollPos) {
        currLink.parent("li").addClass("active");
        if (scrollLock) {
          $(window).scrollTop(previousScrollTop);
        }
        previousScrollTop = $(window).scrollTop();
      } else {
        currLink.parent("li").removeClass("active");
      }
    });
  }

  $("#header a").click(function() {
    var pageId = $(this).attr("href");
    $(".nav li").removeClass("active");
    $(this).parent("li").addClass("active");
    activeLiCount = $(this).parent("li").index();
    activeLiHeight = $(".nav li.active").height();
    navHeight = activeLiCount * activeLiHeight;
    $("html, body").animate({
      scrollTop: $(pageId).offset().top - navHeight
    }, 500);
    return false;
  });
});

* {
  margin: 0;
  padding: 0;
  font-family: arial;
}

#header {
  background: #000;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

ul.nav>li {
  list-style: none;
  display: none;
}

.nav>li>a {
  color: #000;
  text-decoration: none;
  padding: 10px;
  display: block;
  font-size: 16px;
  border-bottom: 1px solid #999;
}

.nav li.active,
.nav a:hover {
  background: #fff;
  color: #000;
}

.nav li.active {
  display: block;
}

.section h3 {
  padding: 12px 0;
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: normal;
  border-bottom: 1px solid #999;
}

p {
  margin: 10px 0 0 0;
}

.section {
  min-height: 100vh;
  padding: 0 15px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div id="header">
  <ul class="nav">
    <li class="active"><a href="#page1">Page One</a></li>
    <li><a href="#page2">Page Two</a></li>
    <li><a href="#page3">Page Three</a></li>
    <li><a href="#page4">Page Four</a></li>
    <li><a href="#page5">Page Five</a></li>
  </ul>
</div>
<div id="page1" class="section">
  <h3>Page one</h3>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
</div>
<div id="page2" class="section">
  <h3>Page Two</h3>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
</div>
<div id="page3" class="section">
  <h3>Page Three</h3>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
</div>
<div id="page4" class="section">
  <h3>Page Four</h3>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
</div>
<div id="page5" class="section">
  <h3>Page Five</h3>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
  <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula
    pharetra.
  </p>
</div>