鍍金池/ 問(wèn)答/HTML/ HTML中下拉到某個(gè)section時(shí)候?qū)?yīng)的導(dǎo)航條換色

HTML中下拉到某個(gè)section時(shí)候?qū)?yīng)的導(dǎo)航條換色

  1. 我想要設(shè)置一個(gè)導(dǎo)航條，然后鏈接到各個(gè)section，然后當(dāng)你下滑頁(yè)面到那個(gè)section的時(shí)候?qū)?yīng)的導(dǎo)航就會(huì)變色，效果如下

圖片描述

這個(gè)是導(dǎo)航條的代碼，
clipboard.png
.]

然后我發(fā)現(xiàn)，實(shí)習(xí)的時(shí)候css的是

.site-navbar-light.scrolled .nav-link.active {
    color: #FDA403 !important;

這個(gè)active是如何實(shí)現(xiàn)的呢，滑到那個(gè)組塊然后就active了，這是涉及js這邊么，小白，請(qǐng)教，謝謝！

回答
編輯回答
司令

查看了下源代碼其實(shí)這個(gè)的實(shí)現(xiàn)是在bootstrap.js里面實(shí)現(xiàn)的。源代碼地址在https://github.com/twbs/boots...
原理的話其實(shí)不復(fù)雜，就是監(jiān)聽body元素的scroll事件, 每一次scroll計(jì)算任意一個(gè)導(dǎo)航欄里指定的target元素是否在當(dāng)前視窗內(nèi)。是的話就給對(duì)應(yīng)的導(dǎo)航欄的元素添加active類

2018年9月15日 01:15