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