實現滾動導航效果

由於近期有乙個頁面需要滾動加導航效果，以前在網上搜了乙個滑鼠滾動事件做了乙個效果，但**太冗餘，不喜歡，所以抽時間研究了一下，使用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>

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

源**：

ScrollView 實現滾動效果

布局檔案 縱向滾動條 需要新增滾動條的內容.水平滾動條 內容 設定滾動條屬性 sethorizontalscrollbarenable false setverticalscrollbarenable false 監聽scrollview何時滑到底部 setontouchlistener activ...

滾動頁面，實現導航欄固定在頂部（吸頂效果）

內容說明頁面中有導航欄，當頁面滾動超出一定範圍時，它會固定在設定好的位置，一般是固定在頂部。本文有兩種方式實現，一種是sticky,相容不好 另外一種是sticky的解體。相容效果萬能 sticky頁面不動的情況下，它就像 position relative 而當頁面滾動超出目標區域時，它表現的就像...

js實現垂直滾動效果

實現js的垂直滾動首先要先搞懂offsettop和scrolltop的兩個屬性offset屬性介紹 scroll屬性介紹 從以上兩篇文章中可以大致將offsettop理解為內部邊框的margin top，而scrolltop可以理解為當外部塊狀元素比內部塊狀元素高度小後，有一部分內部元素高度被遮住，...