這個(gè)插件在前段時(shí)間用過一次，當(dāng)時(shí)是改一個(gè)網(wǎng)站。要求頂部的菜單欄隨著滾動(dòng)條的滾動(dòng)而固定。也大體寫了一下，不過在文章中也只是提了一下，文章地址：jQuery插件固定元素位置。 在這篇文章中，再進(jìn)行總結(jié)一下。

一.scrolltofixed插件功能

固定某個(gè)元素的位置，在頁面滾動(dòng)時(shí)，元素仍然顯示。

二.scrolltofixed官方地址

https://github.com/bigspotteddog/ScrollToFixed。在官方地址上有使用說明，在下面有插件的屬性方法說明。demo中也有詳細(xì)的用例，可以下載下來看下。

三.scrolltofixed使用方法

scrolltofixed插件的使用范圍還是比較廣的，我們可以固定頂部，也可以固定側(cè)邊欄，也可以說“固定頁面中任何一個(gè)元素”。通過和其它插件的使用，可以得到非常好的效果。如檢測到滾動(dòng)條到某一位置，顯示某一元素。而在測試用例中，我們將scrolltofixed插件與scrollto插件一起使用，具體效果可以看下面的“測試文件”。

1.引用文件

scrolltofixed插件使用非常簡單，只需要引用兩個(gè)js就可以了。一個(gè)文件是jquery,一個(gè)是scrolltofixed插件所需的js文件。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-scrolltofixed.js"></script>

2.css樣式文件。使用插件不需要樣式文件，但是我們需要定義固定位置的元素，元素需要我們自定義樣式。這里不貼出樣式文件，可以看下面的“測試文件”。

3.js代碼。一句話就可以實(shí)現(xiàn)初始化，也可以按照需要設(shè)置初始化屬性。如元素的樣式，固定時(shí)顯示的樣式，到哪一個(gè)元素時(shí)，固定元素不再固定等?？梢钥垂俜絛emo。

//本文測試只是固定元素，使用默認(rèn)屬性
$('#operbox').scrollToFixed();

4.使用的html。固定位置的元素需要使用html?？梢钥聪旅娴摹皽y試文件”。

在測試scrolltofixed插件時(shí)，為了提高測試用例的功效，同時(shí)使用了scrollto插件，scrollto插件用于滾動(dòng)到指定元素。
測試環(huán)境：ie8瀏覽器，chrome,firefox。測試結(jié)果：

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

最新評(píng)論