實現滾動導航效果

2022-06-23 16:45:13 字數 2045 閱讀 7460

由於近期有一個頁面需要滾動加導航效果,以前在網上搜了一個滑鼠滾動事件做了一個效果,但**太冗餘,不喜歡,所以抽時間研究了一下,使用jquery+滾動監聽寫了一個小demo,希望能幫助到有需要的朋友。

**如下:

<

style

type

="text/css"

>

.cont li

.cont ul

.cont

.menu

.menu ul

.menu li

.menu ul a

.menu ul li.act a

style

>

<

div

class

="menu"

>

<

ul>

<

li class

="act"

data-url

="item1"

><

a>第一個

a>

li>

<

li data-url

="item2"

><

a>第二個

a>

li>

<

li data-url

="item3"

><

a>第三個

a>

li>

<

li data-url

="item4"

><

a>第四個

a>

li>

ul>

div>

<

div

class

="cont"

>

<

ul>

<

p id

="item"

data-val

="0"

>第一個

p>

<

li><

a href

=""><

img

src=""

/>

a>

li>

ul>

<

ul>

<

p id

="item"

data-val

="1"

>第二個

p>

<

li><

a href

=""><

img

src="/>

item" data-val

="2"

>第三個

p>

<

li><

a href

=""><

img

src=""

/>

a>

li>

ul>

<

ul>

<

p id

="item"

data-val

="3"

>第四個

p>

<

li><

a href

=""><

img

src=""

/>

a>

li>

ul>

div>

這個js內容比較多,然後我又優化了一下,當然,兩個js都可以實現,但是使用上面一個js需要將html裡面的p標籤的class改為對應的item1...,還有,html裡面的內容必須要把整個頁面的內容都撐開,不然無法使用。

配圖:

注:此demo實現思路是借鑑了慕課網的案例。但是裡面使用的是css的 expression表示式得到的,由於在網上瞭解到 expression具有危險性,所有並沒有使用此方法。

源**: