javascript - 导航栏如何默认选中？如何根据当前页面浏览位置，导航栏自动选中？

问题描述

问 题

如题所言，需要刚进网页时是导航栏默认选中某项，然后随着网页的拖动，导航栏根据浏览内容来进行相应的选中状态。

导航栏html代码如下：

<ul class="nav_bar">
                <li><a href="#header" >首页</a></li>  <!--默认-->
                <li><a href="#self">关于我们</a></li>
                <li><a href="#product">产品</a></li>
                <li><a href="#team">团队</a></li>
            </ul>

要怎么实现呢？
补充：
1、没用bootstrap;
2、我这边是一个长网页，不是多个页面，需要根据当前浏览内容的不同来进行导航栏的自动选中；
3、初始默认选中怎么实现。
（今儿有bug，上传图片一直失败）
我的想法：
判断浏览内容的id来进行识别，并进行选中。

解决方案

寫了個簡陋版的，主要是預先儲存每個區塊的觸發高度和其對應的導航，監聽 scroll 事件，在遍歷去比對 (這也是為什麼預先儲存的關係，不然每次都要進行 Dom 操作消耗太大)，取得小於目前捲軸位置最後那個，並且給對應的導航添加 active class

CodePen

这篇关于javascript - 导航栏如何默认选中？如何根据当前页面浏览位置，导航栏自动选中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！