jQuery固定元素插件scrolltofixed使用指南
這個插件在前段時間用過一次，當時是改一個網(wǎng)站。要求頂部的菜單欄隨著滾動條的滾動而固定。也大體寫了一下，不過在文章中也只是提了一下，文章地址：jQuery插件固定元素位置。 在這篇文章中，再進行總結(jié)一下。
一.scrolltofixed插件功能
固定某個元素的位置，在頁面滾動時，元素仍然顯示。
二.scrolltofixed官方地址
https://github.com/bigspotteddog/ScrollToFixed。在官方地址上有使用說明，在下面有插件的屬性方法說明。demo中也有詳細的用例，可以下載下來看下。
三.scrolltofixed使用方法
scrolltofixed插件的使用范圍還是比較廣的，我們可以固定頂部，也可以固定側(cè)邊欄，也可以說“固定頁面中任何一個元素”。通過和其它插件的使用，可以得到非常好的效果。如檢測到滾動條到某一位置，顯示某一元素。而在測試用例中，我們將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代碼。一句話就可以實現(xiàn)初始化，也可以按照需要設置初始化屬性。如元素的樣式，固定時顯示的樣式，到哪一個元素時，固定元素不再固定等?？梢钥垂俜絛emo。
//本文測試只是固定元素，使用默認屬性
$('#operbox').scrollToFixed();
4.使用的html。固定位置的元素需要使用html?？梢钥聪旅娴摹皽y試文件”。
在測試scrolltofixed插件時，為了提高測試用例的功效，同時使用了scrollto插件，scrollto插件用于滾動到指定元素。
測試環(huán)境：ie8瀏覽器，chrome,firefox。測試結(jié)果：
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
- 淺談jQuery頁面的滾動位置scrollTop、scrollLeft
- jQuery中scrollTop()方法用法實例
- jQuery動畫效果animate和scrollTop結(jié)合使用實例
- jquery scrollTop方法根據(jù)滾動像素顯示隱藏頂部導航條
- jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
- JQuery插件iScroll實現(xiàn)下拉刷新，滾動翻頁特效
- jQuery scroll事件實現(xiàn)監(jiān)控滾動條分頁示例
- jquery滾動條插件jScrollPane的使用介紹
- jQuery插件scroll實現(xiàn)無縫滾動效果
- jQuery中ScrollTo用法示例
相關文章
在項目中，我們經(jīng)常要遇到上傳圖片，這就需要我們必須要驗證圖片的格式與大小，那么如何來操作呢，今天就給大家分享一個非常簡單的jQuery驗證上傳圖片的格式與大小的代碼。2014-12-12
jQuery簡單實現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進度條的方法
這篇文章主要介紹了jQuery簡單實現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進度條的方法,涉及jQuery的ajax調(diào)用及頁面樣式操作技巧,需要的朋友可以參考下2016-03-03
jQuery 獲取頁面li數(shù)組并刪除不在數(shù)組中的key
這篇文章主要介紹了jQuery 獲取頁面li數(shù)組并刪除不在數(shù)組中的key 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
jQuery 工具提示可以讓網(wǎng)站上一些小的幫助信息顯示更加直觀，提升用戶的體驗。2011-05-05
jQuery異步上傳文件插件ajaxFileUpload詳細介紹
這篇文章主要介紹了jQuery異步上傳文件插件ajaxFileUpload詳細介紹,本文首先講解了ajaxFileUpload的參數(shù)、錯誤提示等知識,然后給出了簡單使用實例和ASP.NET MVC模式下的使用實例,需要的朋友可以參考下2015-05-05
我正在研究JQuery框架，其下的插件十分豐富，使用十分簡單，功能也十分強大2012-03-03
這篇文章主要介紹了淺析jQuery Mobile的初始化事件,jQuery是當前人氣最高的JavaScript庫,需要的朋友可以參考下2015-12-12
Jquery檢驗手機號是否符合規(guī)則并根據(jù)手機號檢測結(jié)果將提交按鈕設為不同狀態(tài)
接了個項目做，需要是這樣的：輸入手機號，實時判斷輸入的手機號是否符合規(guī)則，如果不符合怎么處理，符合又怎么處理等一系列問題，本篇文章給大家介紹Jquery檢驗手機號是否符合規(guī)則并根據(jù)手機號檢測結(jié)果將提交按鈕設為不同狀態(tài)，感興趣的朋友參考下2015-11-11
詳解Bootstrap的iCheck插件checkbox和radio
這篇文章主要詳細介紹了Bootstrap的iCheck插件checkbox和radio的知識及bootstrap icheck獲取radio的value值的方法，非常不錯，具有參考借鑒價值，感興趣的朋友一起看下吧2016-08-08
不過最近安裝了FF3.5正式版，發(fā)現(xiàn)這種方法在它下面得不到值，就去看jquery的幫助文檔，在文檔中對select選中的引用是用如下方法2009-07-07