向下滚动页面时显示侧栏中的部分标题（可能是使用BS滚动？）

Question

我有一个单页网站，其中包含一个锚链接菜单，我试图找出如何获取锚定部分标题并在向下滚动页面时将其显示在侧边栏中以表示您的位置在页面中。当您到达不同的部分时，标题会发生变化。

我使用bootstrap 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

您可以通过移动data-title中的.nav li > a属性，然后在activate.bs.scrollspy事件中添加一个函数来完成此操作。

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

基于these tutorials，特别是this example。

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

这是updated fiddle