網(wǎng)站前端制作之Jq導航欄頂部固定跟隨

2023-03-10 分類：網(wǎng)站建設

導航欄固定頂部跟隨效果在網(wǎng)站上是很常見的，許多頁面內(nèi)容很長時，需要這種效果來迅速跳轉(zhuǎn)不同頁面區(qū)域，今天來寫一個比較簡單的導航欄固定頂部跟隨效果的demo。

前端效果展示

效果如圖：

HTML代碼

HTML如圖：

CSS代碼

CSS如圖：

JS代碼

JS代碼2

JS如圖：
這里主要講解的是js部分，demo引入了jQuery，使用jQuery語法先聲明navTop把導航欄（#navBox）距離頂部的距離賦值給它，在寫一個滾動事件的函數(shù)（scroll（）），獲取滾動條距離頂部的距離賦值給scrollTop，在滾動函數(shù)里用if判斷比較這個的值，當scrollTop大于等于navTop，添加一個樣式類名，使其定位在頁面頂部，反之，刪除此類名還原導航欄。

當滑動滾動條時，頁面區(qū)域滾動到不同區(qū)域，導航欄需要相對應到不同區(qū)域的a鏈接是選中的狀態(tài)，這就要先獲取每個區(qū)域距離頂部的值，先聲明一個arr空數(shù)組，然后each循環(huán)每個區(qū)域模塊距離頂部的值，通過push添加每個值到arr數(shù)組里，最后觸發(fā)滾動函數(shù)時，for循環(huán)里通過i++條件和if判斷當前滾動條距離頂部的值大于等于第i個的值和state的布爾值，通過下標同樣設置a鏈接添加選中類名，滾動事件結束時設置state的值為true，防止點擊a鏈接時添加類名對應不上。

當前題目：網(wǎng)站前端制作之Jq導航欄頂部固定跟隨
文章鏈接：http://www.rwnh.cn/news/243027.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站改版、小程序開發(fā)、網(wǎng)站排名、建站公司、關鍵詞優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

律師建設網(wǎng)站前應具備的思路和方案 2023-03-10
一個盈利的網(wǎng)站要過的三道關 2023-03-10
網(wǎng)站建設推廣之于企業(yè)的意義 2023-03-10
網(wǎng)站排名優(yōu)化,搜索引擎排名優(yōu)化,百度排名優(yōu)化 2023-03-10
簡單的下單系統(tǒng)網(wǎng)站建設功能點整理 2023-03-10
商城網(wǎng)站建設方案，值得您收藏！ 2023-03-10
大理網(wǎng)站建設公司設計人員要滿足哪些要求 2023-03-10
搜索視頻極速體驗服務開通流程，搜索視頻極速體驗服務有什么特點？ 2023-03-10

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

網(wǎng)站前端制作之Jq導航欄頂部固定跟隨