javascript - 向下滚动页面时在侧边栏中显示部分标题(可能使用 BS scrollspy？)

Question

我有一个带有 anchor 链接菜单的单页站点，我想弄清楚如何在您向下滚动页面以表示您在页。当您到达不同的部分时，标题会发生变化。

我正在使用 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)

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

如果你有兴趣使用它，我已经设置了一个 fiddle :

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