jQuery頁(yè)面滾動(dòng)浮動(dòng)層智能定位實(shí)例代碼
更新時(shí)間:2011年08月23日 23:23:26 作者:
jQuery頁(yè)面滾動(dòng)浮動(dòng)層智能定位實(shí)例代碼,需要的朋友可以參考下。
HTML代碼:
<div class="float" id="float">
我是個(gè)靦腆羞澀的浮動(dòng)層...
</div>
JS代碼:
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
//綁定
$("#float").smartFloat();
復(fù)制代碼 代碼如下:
<div class="float" id="float">
我是個(gè)靦腆羞澀的浮動(dòng)層...
</div>
JS代碼:
復(fù)制代碼 代碼如下:
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
//綁定
$("#float").smartFloat();
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)div浮動(dòng)層跟隨頁(yè)面滾動(dòng)效果
- jQuery實(shí)現(xiàn)的兼容性浮動(dòng)層示例
- jQuery實(shí)現(xiàn)浮動(dòng)層隨瀏覽器滾動(dòng)條滾動(dòng)的方法
- jQuery實(shí)現(xiàn)點(diǎn)擊按鈕彈出可關(guān)閉層的浮動(dòng)層插件
- jquery簡(jiǎn)單的彈出層浮動(dòng)層代碼
- jQuery實(shí)現(xiàn)可拖動(dòng)的浮動(dòng)層完整代碼
- 基于jquery的浮動(dòng)層效果代碼
- jQuery powerFloat萬(wàn)能浮動(dòng)層下拉層插件使用介紹
- 基于JQuery的浮動(dòng)DIV顯示提示信息并自動(dòng)隱藏
- JQuery浮動(dòng)DIV提示信息并自動(dòng)隱藏的代碼
- jQuery實(shí)現(xiàn)的浮動(dòng)層div瀏覽器居中顯示效果
相關(guān)文章
jquery 模擬類搜索框自動(dòng)完成搜索提示功能(改進(jìn))
改進(jìn)版,支持多個(gè)輸入框!前面因?yàn)槎鄠€(gè)輸入框信息不好保存所以只能支持一個(gè),現(xiàn)在用輸入框的alt屬性來(lái)保存修改前的內(nèi)容,所以能支持多個(gè)輸入框了.初步測(cè)試沒(méi)發(fā)現(xiàn)問(wèn)題,歡迎大家一起測(cè)試改進(jìn)!!!2010-05-05jQuery獲取某天的農(nóng)歷日期并判斷是否除夕或新年的方法
這篇文章主要介紹了jQuery獲取某天的農(nóng)歷日期并判斷是否除夕或新年的方法,涉及jQuery針對(duì)日期與時(shí)間的相關(guān)操作技巧,需要的朋友可以參考下2016-03-03JQuery使用index方法獲取Jquery對(duì)象數(shù)組下標(biāo)的方法
這篇文章主要介紹了JQuery使用index方法獲取Jquery對(duì)象數(shù)組下標(biāo)的方法,涉及jQuery中index方法的使用技巧,需要的朋友可以參考下2015-05-05用jQuery與JSONP輕松解決跨域訪問(wèn)的問(wèn)題
本篇文章主要是對(duì)使用jQuery與JSONP輕松解決跨域訪問(wèn)的問(wèn)題進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02jquery實(shí)現(xiàn)鍵盤(pán)左右翻頁(yè)特效
jQuery實(shí)現(xiàn)網(wǎng)頁(yè)上鍵盤(pán)左右方向鍵翻頁(yè)代碼,我們?cè)诤芏嘈≌f(shuō)網(wǎng)站經(jīng)??吹竭@樣的效果,這樣可以給網(wǎng)站提高用戶體驗(yàn),方便訪客翻頁(yè)使用,從而大大提高了網(wǎng)站PV2015-04-04基于jquery實(shí)現(xiàn)動(dòng)態(tài)豎向柱狀條特效
很多數(shù)據(jù)統(tǒng)計(jì)效果中,柱狀條方式的算是比較常見(jiàn)的一種,形象直觀,下面就是一段能夠?qū)崿F(xiàn)此功能的代碼實(shí)例,并且具有一定的動(dòng)態(tài)效果,感興趣的朋友可以參考一下2016-02-02