DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jQuery固定元素插件scrolltofixed使用指南
jQuery固定元素插件scrolltofixed使用指南
編輯:JavaScript綜合知識     

   jQuery固定元素插件scrolltofixed使用指南

         ScrollToFixed (jquery Fixed plugin)能夠讓網頁的導航或表頭等固定在頂部或底部,讓用戶更方便的操作或查看信息。除了導航和表頭,也可以固定其他內容,比如廣告、返回頂部等等。

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

  一.scrolltofixed插件功能

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

  二.scrolltofixed官方地址

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

  三.scrolltofixed使用方法

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

  1.引用文件

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

  ?

1 2 <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。測試結果:


XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved