Question

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

当前，屏幕上会显示2个标题，一个在导航栏内，另一个在内容目录中。
标题应该像在页面的索引一样贴在另一个标签上。
当用户单击任何标题页面时，应滚动到该内容（这在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>

将标题放在顶部，然后放在顶部，类似于页面索引

1 个答案: