熱烈祝賀臺州維博網絡的站長論壇隆重上線!(2012-05-28)    熱烈慶祝偉大的祖國60周年生日 點擊進來我們一起為她祝福吧(2009-09-26)    站長論壇禁止發布廣告,一經發現立即刪除。謝謝各位合作!.(2009-08-08)    熱烈祝賀臺州網址導航全面升級,全新版本上線!希望各位一如既往地支持臺州網址導航的發展.(2009-03-28)    臺州站長論壇恭祝各位新年快樂,牛年行大運!(2009-01-24)    臺州Link正式更名為臺州網址導航,專業做以臺州網址為主的網址導航!(2008-05-23)    熱烈祝賀臺州Link資訊改名為中國站長資訊!希望在以后日子里得到大家的大力支持和幫助!(2008-04-10)    熱烈祝賀臺州Link論壇改名為臺州站長論壇!希望大家繼續支持和鼓勵!(2008-04-10)    臺州站長論壇原[社會瑣碎]版塊更名為[生活百科]版塊!(2007-09-05)    特此通知:新臺州站長論壇的數據信息全部升級成功!">特此通知:新臺州站長論壇的數據信息全部升級成功!(2007-09-01)    臺州站長論壇對未通過驗證的會員進行合理的清除,請您諒解(2007-08-30)    臺州網址導航|上網導航誠邀世界各地的網站友情鏈接和友誼聯盟,共同引領網站導航、前進!(2007-08-30)    禁止發廣告之類的帖,已發現立即刪除!(2007-08-30)    希望各位上傳與下載有用資源和最新信息(2007-08-30)    熱烈祝賀臺州站長論壇全面升級成功,全新上線!(2007-08-30)    
便民網址導航,輕松網上沖浪。
臺州維博網絡專業開發網站門戶平臺系統
您當前的位置: 首頁 » AJAX編程 » jQuery scrollFix滾動定位插件

jQuery scrollFix滾動定位插件

論壇鏈接
  • jQuery scrollFix滾動定位插件
  • 發布時間:2012-10-09 15:23:56    瀏覽數:4316    發布者:superadmin    設置字體【   
$(".target_element").scrollFix( [ "top" | "bottom" | length(可以為負,表示相對bottom), [ "top" | "bottom" ] ]);

第一個參數: 可選,默認為"top",當目標元素到了屏幕相對的位置時開始觸發固定,可以填一個數值,如100,-200 ,負值表示相對于屏幕下方

第一個參數: 可選,默認為"top",表示觸發固定的滾動方向,"top"表示從上向下滾動時觸發,"bottom"表示從下向上滾動時觸發

【下載插件】

下載插件(download)

【代碼示例】

$("#a").scrollFix(-200);
滾動到距離下面200px時開始固定,默認從上到下觸發 $("#b").scrollFix(200,"bottom");
滾動到距離上面200px時開始固定,指定"bottom"從下到上觸發 $("#c").scrollFix("top","top");
滾動到距離上面0時開始固定,指定"top"從上到下觸發 $("#d").scrollFix("bottom","top");
滾動到距離下面0時開始固定,指定"bottom"從下到上觸發

;(function($) {
jQuery.fn.scrollFix = function(height, dir) {
height = height || 0;
height = height == "top" ? 0 : height;
return this.each(function() {
if (height == "bottom") {
height = document.documentElement.clientHeight - this.scrollHeight;
} else if (height < 0) {
height = document.documentElement.clientHeight - this.scrollHeight + height;
}
var that = $(this),
oldHeight = false,
p, r, l = that.offset().left;
dir = dir == "bottom" ? dir : "top"; //默認滾動方向向下
if (window.XMLHttpRequest) { //非ie6用fixed


function getHeight() { //>=0表示上面的滾動高度大于等于目標高度
return (document.documentElement.scrollTop || document.body.scrollTop) + height - that.offset().top;
}
$(window).scroll(function() {
if (oldHeight === false) {
if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) {
oldHeight = that.offset().top - height;
that.css({
position: "fixed",
top: height,
left: l
});
}
} else {
if (dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) {
that.css({
position: "static"
});
oldHeight = false;
} else if (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight) {
that.css({
position: "static"
});
oldHeight = false;
}
}
});
} else { //for ie6
$(window).scroll(function() {
if (oldHeight === false) { //恢復前只執行一次,減少reflow
if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) {
oldHeight = that.offset().top - height;
r = document.createElement("span");
p = that[0].parentNode;
p.replaceChild(r, that[0]);
document.body.appendChild(that[0]);
that[0].style.position = "absolute";
}
} else if ((dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) || (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight)) { //結束
that[0].style.position = "static";
p.replaceChild(that[0], r);
r = null;
oldHeight = false;
} else { //滾動
that.css({
left: l,
top: height + document.documentElement.scrollTop
})
}
});
}
});
};
})(jQuery);
娛樂休閑專區A 影視預告B 音樂咖啡C 英語階梯D 生活百科
網頁編程專區E AMPZF HTMLG CSSH JSI ASPJ PHPK JSPL MySQLM AJAX
Linux技術區 N 系統管理O 服務器架設P 網絡/硬件Q 編程序開發R 內核/嵌入
管理中心專區S 發布網址T 版主議事U 事務處理
陕西快乐10分玩法 安徽十一选五盈利 重庆快乐十分投注软件下载 360十一运夺金走势图 快乐双彩开奖结果彩吧助手 炒股软件排行榜 诃南福彩22选5彩民论坛 王中王 王中王救世网 免费炒股软件下载 综合股票指数 福建36选7上线时间