快捷導(dǎo)航

Jquery實現(xiàn)側(cè)邊欄跟隨滾動條固定（兼容IE6）

更新時間：2014年04月02日 09:50:08 作者：

側(cè)邊欄隨滾動條上下滾動，始終固定在一個位置的功能，現(xiàn)在很多網(wǎng)站和博客都有這個功能

部分購物網(wǎng)站用這個功能放購物車或商品分類導(dǎo)航，使產(chǎn)品頁面很長的時候，側(cè)邊欄能始終固定發(fā)揮它應(yīng)有的作用，有的網(wǎng)站用這個功能來邊欄的廣告。

jQuery代碼：

var rollSet = $('#Roll');// 檢查對象，#sidebar-tab是要隨滾動條固定的ID，可根據(jù)需要更改
var offset = rollSet.offset();
$(window).scroll(function () {
 // 檢查對象的頂部是否在游覽器可見的范圍內(nèi)
 var scrollTop = $(window).scrollTop();
 if(offset.top < scrollTop){
  rollSet.addClass('fixed');
 }else{
  rollSet.removeClass('fixed');
 }
});

CSS代碼：

復(fù)制代碼代碼如下:

.fixed{position:fixed; top:20px;}
.fixed{_position:absolute; _top:expression((20+(noValue = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');}//兼容IE6

您可能感興趣的文章:

相關(guān)文章

jquery實現(xiàn)圖片列表鼠標(biāo)移入微動
本文主要介紹利用jquery實現(xiàn)圖片列表鼠標(biāo)移入微動的實例。代碼清晰，需要的朋友來看下吧
2016-12-12
jquery+ajax實現(xiàn)異步上傳文件顯示進度條
這篇文章主要為大家詳細介紹了jquery+ajax實現(xiàn)異步上傳文件顯示進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
jquery zTree異步加載簡單實例分享
Ztree是一個使用jQuery實現(xiàn)的JSP頁面的各種功能樹，本文介紹一個異步獲取數(shù)據(jù)到下拉樹的實現(xiàn)方式,感興趣的朋友可以了解下，或許對你學(xué)習(xí)ztree有所幫助
2013-02-02
ASP.NET jQuery 實例17 通過使用jQuery validation插件校驗ListBox
這節(jié)介紹jQuery validation插件一個新的校驗規(guī)則屬性rangelength，通過數(shù)組方式賦值
2012-02-02
分享一個自己動手寫的jQuery分頁插件
本文主要是將自己動手些jquery分頁插件的思路和步驟分享給大家，本分頁插件功能很簡單，但是卻很實用，不想其他插件似的，功能一大堆。好了，廢話不多說，還是看正文吧
2014-08-08
jQuery 移動端artEditor富文本編輯器
這篇文章主要介紹了jQuery 移動端artEditor富文本編輯器的相關(guān)資料,需要的朋友可以參考下
2016-01-01
jQuery晃動層特效實現(xiàn)方法
這篇文章主要介紹了jQuery晃動層特效實現(xiàn)方法,實例分析了animate方法與css樣式的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
使用jquery實現(xiàn)仿百度自動補全特效
這里給大家分享的效果是像百度的搜索框一樣，當(dāng)用戶在文本框輸入前幾個字母或是漢字的時候,該控件就能從存放數(shù)據(jù)的文或是數(shù)據(jù)庫里將所有以這些字母開頭的數(shù)據(jù)提示給用戶,供用戶選擇,提供方便，增加用戶體驗。
2015-07-07
jQuery性能優(yōu)化28條建議你值得借鑒
一直在尋找有關(guān)jQuery性能優(yōu)化方面的小竅門，能讓我那臃腫的動態(tài)網(wǎng)頁應(yīng)用變得輕便些，我決定將最好最常用的一些優(yōu)化性能的建議列出來,感興趣的你可不要錯過了哈，或許本文所提供的建議對你有所幫助
2013-02-02
jQuery實現(xiàn)根據(jù)類型自動顯示和隱藏表單
這篇文章主要給大家分享了jQuery實現(xiàn)根據(jù)類型自動顯示和隱藏表單的代碼，非常的簡單實用，僅僅10行代碼，推薦給大家，希望能給大家一些提示。
2015-03-03