向下滚动页面时在侧边栏中显示部分标题(也许使用 BS scrollspy?

Question

我有一个带有锚链接菜单的单页网站，我正在尝试弄清楚如何获取锚定的部分标题并在您向下滚动页面时将其显示在侧边栏中以表示您在页面中的位置。标题会随着您到达不同的部分而更改。

我正在使用引导 scrollspy 来突出显示活动链接 - 我想知道这是否也可以与此一起使用。

为了获取标题，我使用了这样的数据属性：

<a href="#section1">
...
<div id="section1" data-title="This is my title">

然后我使用 jQuery 在侧边栏标签中显示标题：

var title = $('#section1').attr("data-title")
$('#label span').html(title)

我不知道的是如何在向下滚动页面时更改该标题。

如果你有兴趣玩它，我已经设置了一个小提琴：

https://jsfiddle.net/02uap85b/

谢谢！

Answer 1

可以通过在

.nav li > a内移动 data-title 属性，然后添加在 activate.bs.scrollspy 事件上触发的函数来实现此目的。

$(".nav").on("activate.bs.scrollspy", function(){
    var currentItem = $(".nav li.active > a").text();
    $('#label span').empty().html(currentItem);
})

基于这些教程，特别是请参阅此示例。

$(document).ready(function() {
// display section 1 title in sidebar
  

// smooth scrolling
$(function() {
		  $('a[href*="#"]:not([href="#"])').click(function() {
			if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
			  var target = $(this.hash);
			  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			  if (target.length) {
				$('html, body').animate({
				  scrollTop: target.offset().top
				}, 1000);
				return false;
			  }
			}
		  });
		});
    
    $(".nav").on("activate.bs.scrollspy", function(){
        var currentItem = $(".nav li.active > a").text();
        $('#label span').empty().html(currentItem);
    })
    
});

body {
  background: #eee;
}
.wrapper {
  padding-right: 60px
}
header {
  background: white;
  position: fixed;
  height: 100%;
  width: 60px;
  right: 0;
  top: 0;
  z-index: 999;
  transition: background-color .45s ease-in-out, width .5s cubic-bezier(.645, .045, .355, 1) 0ms, transform 1s cubic-bezier(.25, .46, .45, .94), opacity .6s linear .8s, -webkit-opacity .6s linear .8s;
}
header:hover {
  width: 33vw;
  transition: background-color .45s ease-in-out, width .5s cubic-bezier(.645, .045, .355, 1) 0ms, transform 1s cubic-bezier(.25, .46, .45, .94), opacity .6s linear .8s, -webkit-opacity .6s linear .8s;
}
.navbar-wrap {
  width: 100%;
  border-top: 1px solid #ccc;
  position: absolute;
  bottom: 0;
  right: 0
}
.navbar-toggle {
  display: block!important;
  float: right;
  margin: 0px auto;
  padding: 20px 5px;
  width: 60px;
}
.navbar-toggle .icon-bar {
  background: black;
  margin: 0 auto
}
#menu {
  position: absolute;
  top: 40%;
  left: 100%;
  opacity: 0;
  transition: all .5s
}
header:hover #menu {
  left: 0;
  opacity: 1;
  transition: all .5s
}
#menu li.active a:after {
  content: ' /'
}
header .bug {
  text-align: center;
  padding: 10px 0;
  width: 60px;
  float: right;
  position: relative;
  z-index: 500
}
#label {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  animation-delay: 1s
}
h1,
h2,
h3 {
  margin-top: 0
}
#label > span {
  transform: rotate(-90deg);
  width: 60px;
  position: absolute;
  right: 0;
  top: 50%;
  white-space: nowrap
}
.section {
  position: relative
}
#section0 {
  background-image: url(http://a3.files.blazepress.com/image/upload/MTI4OTgzNTM2OTg3MzE0NjU0.gif);
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
}
#section1 {
  background: #3498db
}
#section2 {
  background-image: url(http://a3.files.blazepress.com/image/upload/MTI4OTgzNTM2OTg3MzE0NjU0.gif);
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
}
#section3 {
  background: #973456
}
.panel {
  width: 50%;
  height: 50%;
  position: absolute;
  overflow: hidden;
  vertical-align: bottom;
}
.section .panel:nth-child(1) {
  top: 0;
  left: 0;
  background: red
}
.section .panel:nth-child(2) {
  top: 0;
  right: 0;
  background: green
}
.section .panel:nth-child(3) {
  bottom: 0;
  left: 0;
  background: blue
}
.section .panel:nth-child(4) {
  bottom: 0;
  right: 0;
  background: purple
}
.banner {
  padding: 120px 0
}
.flyout {
  right: -99999px;
  background: white;
  position: absolute;
  height: 100%;
}
.section .panel:hover > .flyout {
  right: 0;
  top: 0
}
.logo {
  margin: 25px 0
}
.heading {
  position: absolute;
  padding: 60px 15px
}
.bottom {
  bottom: 0
}
.left {
  left: 0
}
.right {
  right: 0
}
.top {
  top: 0
}
.full {
  height: 100vh;
}
.full > .container {
  position: absolute;
  height: 100%;
  left: 0;
  right: 0
}
.goingdown {
  font-size: 42px;
  color: #fff;
  text-decoration: none
}
.text-white {
  color: #fff
}
.text-black {
  color: #000
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body data-spy="scroll" data-target="#menu">
  <header class="animated fadeInUp">
    <div id="label" class="animated fadeIn">
      <span>Title Goes Here</span>
    </div>
    <nav id="menu">
      <ul class="nav">
        <li><a href="#section0" data-title="Section 0 Title">Section 0</a></li>
        <li><a href="#section1" data-title="Section 1 Title">Section 1</a></li>
        <li><a href="#section2" data-title="This is Section 2">Section 2</a></li>
        <li><a href="#section3" data-title="Welcome to Section 3">Section 3</a></li>
      </ul>
    </nav>
  </header>
  <div class="wrapper">
    <div class="section full" id="section0">
      <div class="container text-center">
        <div class="heading">
          <h1>Welcome to Section 0</h1>
          
        </div>
      </div>
    </div>
    <div class="section banner" id="section1">
      <div class="container text-center text-white">
        <h1>This is Section 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum velit, bibendum nec tellus et, facilisis vehicula est. Curabitur imperdiet, lectus vel condimentum luctus, nunc lacus sagittis augue, viverra auctor lacus justo nec nisi. Sed
          maximus nulla eget ultrices posuere. Duis sodales ultricies augue ac pulvinar. Vivamus vitae metus tempor, cursus lectus vel, eleifend enim. Duis non quam vitae lacus elementum ultrices. Etiam condimentum odio justo, sit amet ultrices metus
          dapibus non. Pellentesque sodales risus eget dui euismod, euismod tincidunt nisi accumsan. Pellentesque malesuada, lectus in ultrices blandit, purus tortor consectetur risus, vitae egestas felis magna quis turpis. Donec blandit sed sapien et
          commodo.
        </p>
      </div>
    </div>
    <div class="section banner full" id="section2">
      <div class="container wow fadeIn text-center text-white">
        <h1>And This is Section 2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum velit, bibendum nec tellus et, facilisis vehicula est. Curabitur imperdiet, lectus vel condimentum luctus, nunc lacus sagittis augue, viverra auctor lacus justo nec nisi. Sed
          maximus nulla eget ultrices posuere. Duis sodales ultricies augue ac pulvinar. Vivamus vitae metus tempor, cursus lectus vel, eleifend enim. Duis non quam vitae lacus elementum ultrices. Etiam condimentum odio justo, sit amet ultrices metus
          dapibus non. Pellentesque sodales risus eget dui euismod, euismod tincidunt nisi accumsan. Pellentesque malesuada, lectus in ultrices blandit, purus tortor consectetur risus, vitae egestas felis magna quis turpis. Donec blandit sed sapien et
          commodo.
        </p>
      </div>
    </div>
    <div class="section full" id="section3">
      <h1>Hey! Section Three!</h1>
    </div>
  </div>

这是更新的小提琴