Question

我遇到两种情况，当我滚动到某个部分时会自动选择导航栏项目。我如何实现这一目标？我正在寻找一个最新的2018年的解决方案，尽可能简单（vanilla JS或没有额外的JS使用bootstrap）。我发现了几篇关于使用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>

Answer 1

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

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

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

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

谢谢。

Answer 2

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

此组件在Bootstrap 4中称为＆＃34; scrollspy＆＃34; 。

来自文档：

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

参考：

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

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

2 个答案: