jQuery簡單實(shí)現(xiàn)頁面元素置頂時(shí)懸浮效果示例
更新時(shí)間：2016年08月01日 12:02:50 作者：Quber
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)頁面元素置頂時(shí)懸浮效果的方法,涉及jQuery針對頁面元素樣式的動態(tài)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery簡單實(shí)現(xiàn)頁面元素置頂時(shí)懸浮效果的方法。分享給大家供大家參考，具體如下：
一、JS Code：
<script type="text/javascript">
$.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: pos,
top: top
});
}
});
};
return $(this).each(function () {
position($(this));
});
};
//綁定
$("#float").smartFloat();
</script>
二、Html Code：
<div class="float" id="float" style="border: 1px solid #e0e0e0; padding: 10px;"> 我是置頂時(shí)懸浮的區(qū)域</div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jquery鼠標(biāo)放上去顯示懸浮層即彈出定位的div層
- jquery實(shí)現(xiàn)的可隱藏重現(xiàn)的靠邊懸浮層實(shí)例代碼
- 使用jQuery UI的tooltip函數(shù)修飾title屬性的氣泡懸浮框
- 自定義一個(gè)jquery插件[鼠標(biāo)懸浮時(shí)候 出現(xiàn)說明label]
- jquery實(shí)現(xiàn)鼠標(biāo)懸浮停止輪播特效
- jquery懸浮提示框完整實(shí)例
- 鼠標(biāo)懸浮顯示二級菜單效果的jquery實(shí)現(xiàn)
- jQuery實(shí)現(xiàn)懸浮在右上角的網(wǎng)頁客服效果代碼
- jQuery鼠標(biāo)懸浮鏈接彈出跟隨圖片實(shí)例代碼
- jQuery實(shí)現(xiàn)的簡單懸浮層功能完整實(shí)例
相關(guān)文章
jQuery基于事件控制實(shí)現(xiàn)點(diǎn)擊顯示內(nèi)容下拉效果
這篇文章主要介紹了jQuery基于事件控制實(shí)現(xiàn)點(diǎn)擊顯示內(nèi)容下拉效果,涉及jQuery事件響應(yīng)及元素屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
jquery實(shí)現(xiàn)select選中行、列合計(jì)示例
這篇文章主要介紹了jquery如何實(shí)現(xiàn)select選中行、列合計(jì)示例 ,需要的朋友可以參考下2014-04-04
jQuery Ajax之$.get()方法和$.post()方法
load()方法通常用來從Web服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件，然而這并不能體現(xiàn)Ajax的全部價(jià)值。在項(xiàng)目中，如果需要傳遞一些參數(shù)給服務(wù)器中的頁面，那么可以使用$.get()或者$.post()方法（或者是后面要講解到的$.ajax方法）。2009-10-10
這里給大家分享的是一個(gè)網(wǎng)友咨詢的關(guān)于jQuery獲取name名的value值的問題，感覺很具有普遍性，所以記錄下來，希望對大家能有所幫助。2015-02-02
JQuery Ajax WebService傳遞參數(shù)的簡單實(shí)例
下面小編就為大家?guī)硪黄狫Query Ajax WebService傳遞參數(shù)的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
非常簡單的一句話即可實(shí)現(xiàn)，大家可以看看。2009-04-04
Jquery Ajax學(xué)習(xí)實(shí)例 向頁面發(fā)出請求，返回XML格式數(shù)據(jù)
Jquery Ajax學(xué)習(xí)實(shí)例 向頁面發(fā)出請求，返回XML格式數(shù)據(jù)的代碼2010-03-03
jQuery EasyUI NumberBox(數(shù)字框)的用法
jQuery EasyUI 數(shù)字框(NumberBox)用法2010-07-07
這篇文章主要介紹了jquery 遍歷hash操作,結(jié)合實(shí)例形式分析了jQuery基于ajax交互獲取并遍歷hash相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
Jquery遍歷checkbox獲取選中項(xiàng)value值的方法
這篇文章主要介紹了Jquery遍歷checkbox獲取選中項(xiàng)的value值,需要的朋友可以參考下2014-02-02