在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

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

圖片描述

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

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

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

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

回答
編輯回答
司令

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

2018年9月15日 01:15