首頁 > web前端 > js教程 > 主體

jQuery固定元素外掛scrolltofixed使用指南_jquery

WBOY
發布: 2016-05-16 16:02:59
原創
1754 人瀏覽過

這個外掛程式在前段時間用過一次,當時是改一個網站。要求頂部的選單列隨著捲軸的滾動而固定。也大致寫了一下,不過在文章中也只是提了一下,文章地址:jQuery插件固定元素位置。 在這篇文章中,再進行總結一下。

一.scrolltofixed外掛功能

固定某個元素的位置,在頁面捲動時,元素仍然顯示。

二.scrolltofixed官方地址

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

三.scrolltofixed使用方法

scrolltofixed插件的使用範圍還是比較廣的,我們可以固定頂部,也可以固定側邊欄,也可以說「固定頁面中任何一個元素」。透過和其它插件的使用,可以得到非常好的效果。如偵測到捲軸到某一位置,顯示某一元素。而在測試案例中,我們將scrolltofixed插件與scrollto插件一起使用,具體效果可以看下面的「測試檔案」。

1.引用文件

scrolltofixed外掛使用非常簡單,只要引用兩個js就可以了。一個檔案是jquery,一個是scrolltofixed外掛所需的js檔。

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

登入後複製

2.css樣式檔。使用外掛不需要樣式文件,但是我們需要定義固定位置的元素,元素需要我們自訂樣式。這裡不貼出樣式文件,可以看下面的「測試文件」。

3.js程式碼。一句話就可以實作初始化,也可以按照需要設定初始化屬性。如元素的樣式,固定時顯示的樣式,到哪一個元素時,固定元素不再固定等。可以看官方demo。

//本文檢定只是固定元素,使用預設屬性
$('#operbox').scrollToFixed();

4.使用的html。固定位置的元素需要使用html。可以看下面的「測試文件」。

在測試scrolltofixed插件時,為了提高測試案例的功效,同時使用了scrollto插件,scrollto插件用於捲動到指定元素。
測試環境:ie8瀏覽器,chrome,firefox。測試結果:

以上所述就是本文的全部內容了,希望大家能夠喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板