Javascript 根据滚动期间当前可见的内容突出显示索引中的项

在我的html页面中，我有一个带有CSS属性的目录

position:fixed

并希望在向下滚动页面时突出显示（粗体或斜体）当前的读取/显示位置

                             | yada yada yada ...
1. Section 1                 |
 1.1 Subsection 1            | 1.2 Subsection 2
 1.2 Subsection 2 <-- bold   |   
2. Section 2                 | Lorem ipsum dolor sit amet,
[...]                        | consectetur adipisici elit
                             | [...]

---

如果您的内容标题和索引项在命名约定中具有

id

或

data

属性，则可以在

滚动中跟踪内容标题的可见性

然后，您可以使用命名约定在索引中找到它，并在其上添加一个highlight类

下面是一个工作示例：

这里真正的技巧是
iselementviewport
函数。您可以按原样使用它，也可以轻松地将这里的简化示例改编为嵌套索引


函数IsElementViewPort（el）{
//为使用jQuery的用户提供特别奖励
if（typeof$=“function”&&el instanceof$）{
el=el[0]；
}
var rect=el.getBoundingClientRect（），
vWidth=window.innerWidth | | doc.documentElement.clientWidth，
vHeight=window.innerHeight | | doc.documentElement.clientHeight，
efp=函数（x，y）{returndocument.elementFromPoint（x，y）}；
//如果不在视口中，则返回false
如果（右下角<0 | |右下角<0
||矩形左>宽| |矩形顶>高）
返回false；
//如果四个角中的任何一个可见，则返回true
返回(
el.contains（efp（正左，正上））
||el.contains（efp（右矩形，右矩形顶部））
||el.contains（efp（右直，下直））
||el.contains（efp（左直，下直））
);
}
var handler=function（）{
可见var=0；
[1,2,3,4].forEach（函数（id）{
如果（IsElementViewPort（$（'#'+id）））可见=id；
})
如果（可见）{
$（'#index div'）.removeClass（'active'）；
$（“#索引-”+可见）.addClass（'active'）；
}
};
//jQuery
$（窗口）.on（'DOMContentLoaded load resize scroll'，handler）
#索引{
宽度：100%；
位置：固定；
排名：0；
左：0；
背景：白色；
}
.主动{
字体大小：粗体；
颜色：绿色；
}
#内容{
填充顶部：90px；
}

第一节
第二节
第三节
第四节
第一节
Lorem ipsum dolor sit amet，奉献精英。发明者伊普苏姆·奎斯夸姆，最大解释力，必要的驱避剂，再利用！最低限度的权利，必要的权利。小体小体，小体小体。
Lorem ipsum dolor sit amet，奉献精英。勃朗地是自由人的代表，同时也是同一个人的代表，他是一个充满活力的人？
Lorem ipsum dolor sit amet，奉献精英。不言而喻，发明家eligendi是一个无所不知的人，他是一个有尊严的人！福吉亚特·沃鲁帕罗·奎斯夸姆（nam laudantium porro quisquam）！
第二节
Lorem ipsum dolor sit amet，奉献精英。发明者伊普苏姆·奎斯夸姆，最大解释力，必要的驱避剂，再利用！最低限度的权利，必要的权利。小体小体，小体小体。
Lorem ipsum dolor sit amet，奉献精英。勃朗地是自由人的代表，同时也是同一个人的代表，他是一个充满活力的人？
Lorem ipsum dolor sit amet，奉献精英。不言而喻，发明家eligendi是一个无所不知的人，他是一个有尊严的人！福吉亚特·沃鲁帕罗·奎斯夸姆（nam laudantium porro quisquam）！
第三节
Lorem ipsum dolor sit amet，奉献精英。发明者伊普苏姆·奎斯夸姆，最大解释力，必要的驱避剂，再利用！最低限度的权利，必要的权利。小体小体，小体小体。
Lorem ipsum dolor sit amet，奉献精英。勃朗地是自由人的代表，同时也是同一个人的代表，他是一个充满活力的人？
Lorem ipsum dolor sit amet，奉献精英。不言而喻，发明家eligendi是一个无所不知的人，他是一个有尊严的人！福吉亚特·沃鲁帕罗·奎斯夸姆（nam laudantium porro quisquam）！
第四节
Lorem ipsum dolor sit amet，奉献精英。发明者伊普苏姆·奎斯夸姆，最大解释力，必要的驱避剂，再利用！最低限度的权利，必要的权利。小体小体，小体小体。
Lorem ipsum dolor sit amet，奉献精英。勃朗地是自由人的代表，同时也是同一个人的代表，他是一个充满活力的人？
Lorem ipsum dolor sit amet，奉献精英。不言而喻，发明家eligendi是一个无所不知的人，他是一个有尊严的人！福吉亚特·沃鲁帕罗·奎斯夸姆（nam laudantium porro quisquam）！

<!-- ignore empty links with + -->
{{ $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content }}
<!-- at least one header to link to -->
{{ $has_headers := ge (len $headers) 1 }}
<!-- a post can explicitly disable Table of Contents with toc: false -->
{{ $show_toc := (eq $.Params.toc true) }}
{{ if and $has_headers $show_toc }}
<div class="table-of-contents toc bd-callout">
    <!-- TOC header -->
    <h4 class="text-muted">Table of Contents</h4>
    {{ range $headers }}
        {{ $header := . }}
        {{ range first 1 (findRE "<h[1-6]" $header 1) }}
            {{ range findRE "[1-6]" . 1 }}
                {{ $next_heading := (int .) }}
                <!-- generate li array of the proper depth -->
                {{ range seq $next_heading }}
                    <ul class="toc-h{{ . }}">
                {{end}}
                {{ $base := ($.Page.File.LogicalName) }}
                {{ $anchorId := ($header | plainify | htmlEscape | urlize) }}
                {{ $href := delimit (slice $base $anchorId) "#" | string }}
                <a href="{{ relref $.Page $href }}">
                    <li>{{ $header | plainify | htmlEscape }}</li>
                </a>
                <!-- close list -->
                {{ range seq $next_heading }}
                    </ul>
                {{end}}
            {{end}}
        {{end}}
    {{ end }}
</div>
{{ end }}