将标题贴在顶部的顶部，类似于页面索引

Question

当用户滚动时，我需要将内容的标题粘贴在其他内容的顶部。现在我使用了引导程序Scrollspy。哪个效果很好，但我需要在其中包含以下内容。 Here is the codepen link.。 （未在 SO 编辑器中添加代码，因为它在编辑器中显示移动视图。）

1. 目前，两个标题显示在导航栏中的一个屏幕上，另一个来自内容。
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>