时间戳

首页 > 解决方案 > 将标题贴在顶部下方，类似于页面索引

javascript - 将标题贴在顶部下方，类似于页面索引

问题描述

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

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

我知道编写自定义 JS 对我来说需要一些时间（这对我来说是最后的选择）。我试图用谷歌搜索，但大多数插件都类似于 Scrollspy。

我可以为此使用任何插件，或者任何简单的更改Scrollspy也可以工作。

这是它应该看起来的样子

标签： javascriptjqueryhtmlcssscroll

解决方案

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

$(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>

推荐阅读