Javascript 向下滚动页面时，在侧边栏中显示部分标题（可能使用BS scrollspy？）

我有一个带有锚定链接菜单的单页站点，我正在尝试找出如何在你向下滚动页面时，将锚定的部分标题显示在侧边栏中，以指示你在页面中的位置。标题会随着你到达不同的部分而改变

我正在使用引导scrollspy来突出显示活动链接——我想知道这是否也可以用于此

为了获取标题，我使用了如下数据属性：

<a href="#section1">

...

<div id="section1" data-title="This is my title">

我不明白的是，当你向下滚动页面时，如何更改标题

如果你对摆弄小提琴感兴趣，我已经摆好了一把小提琴：

---

谢谢大家!

您可以通过将

数据标题

属性移动到

.nav li>a

中，然后添加在

激活.bs.scrollspy

事件中激发的函数来完成此操作

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

基于，特别是参见

$（文档）.ready（函数（）{
//在侧边栏中显示第1节标题
//平滑滚动
$（函数（）{
$（'a[href*=“#”]：不是（[href=“#”]”）。单击（函数（）{
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（目标长度）{
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}, 1000);
返回false；
}
}
});
});
$（.nav”）.on（“activate.bs.scrollspy”，function（）{
var currentItem=$（.nav li.active>a”）.text（）；
$（'#label span'）.empty（）.html（currentItem）；
})
});
正文{
背景：#eee；
}
.包装纸{
右侧填充：60px
}
标题{
背景：白色；
位置：固定；
身高：100%；
宽度：60px；
右：0；
排名：0；
z指数：999；
过渡：背景色.45s缓进-缓出，宽度.5s立方贝塞尔（.645，.045，.355，1）0ms，变换1s立方贝塞尔（.25，.46，.45，.94），不透明度.6s线性.8s，-webkit不透明度.6s线性.8s；
}
标题：悬停{
宽度：33vw；
过渡：背景色.45s缓进-缓出，宽度.5s立方贝塞尔（.645，.045，.355，1）0ms，变换1s立方贝塞尔（.25，.46，.45，.94），不透明度.6s线性.8s，-webkit不透明度.6s线性.8s；
}
.导航条包裹{
宽度：100%；
边框顶部：1px实心#ccc；
位置：绝对位置；
底部：0；
右：0
}
.导航栏切换{
显示：块！重要；
浮动：对；
保证金：0px自动；
填充：20px 5px；
宽度：60px；
}
.导航栏切换.图标栏{
背景：黑色；
保证金：0自动
}
#菜单{
位置：绝对位置；
最高：40%；
左：100%；
不透明度：0；
过渡：全部。5s
}
标题：悬停#菜单{
左：0；
不透明度：1；
过渡：全部。5s
}
#菜单li.active a：之后{
内容：'/'
}
标题。错误{
文本对齐：居中；
填充：10px0；
宽度：60px；
浮动：对；
位置：相对位置；
z指数：500
}
#标签{
位置：相对位置；
宽度：100%；
身高：100%；
背景：#fff；
动画延迟：1s
}
h1，
h2，
h3{
页边距上限：0
}
#标签>跨度{
变换：旋转（-90度）；
宽度：60px；
位置：绝对位置；
右：0；
最高：50%；
空白：nowrap
}
.科{
职位：相对
}
#第0节{
背景图片：url(http://a3.files.blazepress.com/image/upload/MTI4OTgzNTM2OTg3MzE0NjU0.gif);
背景尺寸：封面；
背景附件：固定；
颜色：#fff；
}
#第一节{
背景：#3498db
}
#第2节{
背景图片：url(http://a3.files.blazepress.com/image/upload/MTI4OTgzNTM2OTg3MzE0NjU0.gif);
背景尺寸：封面；
背景附件：固定；
颜色：#fff；
}
#第三节{
背景：#973456
}
.小组{
宽度：50%；
身高：50%；
位置：绝对位置；
溢出：隐藏；
垂直对齐：底部对齐；
}
.部分.面板：第n个子（1）{
排名：0；
左：0；
背景：红色
}
.部分.面板：第n个子（2）{
排名：0；
右：0；
背景：绿色
}
.部分.面板：第n个孩子（3）{
底部：0；
左：0；
背景：蓝色
}
.部分.面板：第n个孩子（4）{
底部：0；
右：0；
背景：紫色
}
.横幅{
填充：120px 0
}
.弹出按钮{
右：-99999像素；
背景：白色；
位置：绝对位置；
身高：100%；
}
.section.panel:悬停>.fluout{
右：0；
排名：0
}
.标志{
利润率：25px 0
}
.标题{
位置：绝对位置；
填充：60px 15px
}
.底部{
底部：0
}
.左{
左：0
}
.对{
右：0
}
.顶{
排名：0
}
.满{
高度：100vh；
}
.full>.container{
位置：绝对位置；
身高：100%；
左：0；
右：0
}
.下去{
字体大小：42px；
颜色：#fff；
文本装饰：无
}
.白色文本{
颜色：#fff
}
.黑色文本{
颜色：#000
}

标题在这里






欢迎来到第0节
这是第一节
Lorem ipsum dolor sit amet，是一位杰出的献身者。以同侧帆为例，以车辆为例。库拉比图尔·因普雷迪特（Curabitur imperdiet）、卢库斯（lectus vel调味品）、奥古斯特（nunc lacus sagittis augue）、维韦拉（viverra auctor lacus justo nec nisi）。塞德
马克西姆斯·努拉·埃吉特·乌里塞斯·波苏尔。这是普尔文纳的奥古斯都。时间的生命，生命的轨迹，生命的终点。这是一种不属于特殊元素的生命。我的调味品是奥迪奥·胡斯托（odio justo），是一种特殊的调味品
达皮布斯诺。佩伦特斯克苏打水是一杯酒，是一杯酒。佩朗茨克·马莱苏阿达、乌尔特里塞斯·布兰迪特中的莱克托斯、圣殿祈祷书、猫咪的生命。Donec blandit sed sapien等人
康莫多。

这是第二节
Lorem ipsum dolor sit amet，是一位杰出的献身者。以同侧帆为例，以车辆为例。铜
$(".nav").on("activate.bs.scrollspy", function(){
    var currentItem = $(".nav li.active > a").text();
    $('#label span').empty().html(currentItem);
})