快捷導(dǎo)航

jQuery頁面滾動(dòng)浮動(dòng)層智能定位實(shí)例代碼

更新時(shí)間：2011年08月23日 23:23:26 作者：

jQuery頁面滾動(dòng)浮動(dòng)層智能定位實(shí)例代碼，需要的朋友可以參考下。

HTML代碼：

 
<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(); 

您可能感興趣的文章:

相關(guān)文章

jQuery經(jīng)過一段時(shí)間自動(dòng)隱藏指定元素的方法
這篇文章主要介紹了jQuery經(jīng)過一段時(shí)間自動(dòng)隱藏指定元素的方法,實(shí)例分析了兩種比較常用的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-03-03
jQuery封裝的屏幕居中提示信息代碼
這篇文章主要介紹了jQuery封裝的屏幕居中提示信息代碼,可以很方便的集成到項(xiàng)目開發(fā)中使用,涉及jQuery針對(duì)頁面元素的動(dòng)態(tài)操作技巧,需要的朋友可以參考下
2016-06-06
jQuery插件實(shí)現(xiàn)大圖全屏圖片相冊(cè)
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)大圖全屏圖片相冊(cè)的方法和示例，基于jQuery插件jQuery.album.js來實(shí)現(xiàn)的，效果非常不錯(cuò)，這里推薦給大家，希望大家能夠喜歡。
2015-03-03
jQuery實(shí)現(xiàn)分隔條左右拖動(dòng)功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)分隔條左右拖動(dòng)功能，需要的朋友可以參考下
2015-11-11
jquery validate.js表單驗(yàn)證入門實(shí)例（附源碼）
這篇文章主要介紹了jquery validate.js表單驗(yàn)證入門實(shí)例，為大家提供了jquery validate.js表單驗(yàn)證的源碼，特別適合初學(xué)者學(xué)習(xí)validate.js表單驗(yàn)證，感興趣的小伙伴們可以參考一下
2015-11-11
JQuery通過AJAX從后臺(tái)獲取信息顯示在表格上并支持行選中
這篇文章主要介紹了JQuery通過AJAX從后臺(tái)獲取信息顯示在表格上并支持行選中的相關(guān)資料,需要的朋友可以參考下
2015-09-09
jQuery實(shí)現(xiàn)的圖片輪播效果完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的圖片輪播效果,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)改變頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下
2016-09-09
JS中判斷null、undefined與NaN的方法
這篇文章主要介紹了JS中判斷null、undefined與NaN的方法,需要的朋友可以參考下
2014-03-03
jQuery插件之Tocify動(dòng)態(tài)節(jié)點(diǎn)目錄菜單生成器附源碼下載
Tocify是一個(gè)能夠動(dòng)態(tài)生成文章節(jié)點(diǎn)目錄的jQuery插件，通過本文給大家分享jQuery插件之Tocify動(dòng)態(tài)節(jié)點(diǎn)目錄菜單生成器，對(duì)tocify菜單生成器相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
基于LayUI分頁和LayUI laypage分頁的使用示例
本篇文章主要介紹了基于LayUI分頁和LayUI laypage分頁的使用示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08