如何根据网页部分制作自动导航栏？答案

【问题标题】：How to make automatic navbar based on section of a webpage?如何根据网页部分制作自动导航栏？
【发布时间】：2018-03-18 22:28:54
【问题描述】：

我遇到了两种情况，当我滚动到某个部分时会自动选择导航栏项目。我该如何做到这一点？我正在寻找一个 2018 年最新且尽可能简单的解决方案（vanilla JS 或没有使用 bootstrap 的额外 JS）。我发现了几篇关于使用 jquery 来做到这一点的帖子，但看起来交叉点观察者是更好的方法？

一个例子是https://insights.stackoverflow.com/survey/2018/，另一个是http://getbootstrap.com/docs/3.3/javascript/#dropdowns。

假设我有以下 html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="navbar">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active" id="about-nav-item">
                    <a class="nav-link" href="#about">About <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item" id="portfolio-nav-item">
                    <a class="nav-link" href="#portfolio">Portfolio</a>
                </li>
                <li class="nav-item" id="contact-nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container" id='about'>
    </div>
    <div class="container" id='portfolio'>
    </div>
    <div class="container" id='contact'>
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="code.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript jquery html bootstrap-4 intersection-observer

【解决方案1】：

当我滚动到某个部分时，会自动选择导航栏项目。我如何做到这一点？

此组件在 Bootstrap 4 中称为 “scrollspy”。

来自文档：

根据滚动位置自动更新 Bootstrap 导航或列表组组件，以指示当前在视口中哪个链接处于活动状态。

参考：

https://getbootstrap.com/docs/4.0/components/scrollspy/

【讨论】：

【解决方案2】：

获取动态导航链接。创建一个表格并添加四列，一列用于显示每个名称，第二列用于链接（url），第三列用于显示图标（fa fa-x），第四列用于排名按顺序显示。

1.左链接标题 2.左链接地址 3.icon（显示图标或图像ex：fa fa-x） 4.rank(按顺序排列)

在数据库表中插入这些字段并在导航栏中循环结果。

您也可以将此链接分配给用户，这样您就可以限制对用户的访问*。

谢谢。

【讨论】：