快捷導(dǎo)航

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

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

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

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

jQuery代碼：

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

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