jQuery簡(jiǎn)單實(shí)現(xiàn)頁(yè)面元素置頂時(shí)懸浮效果示例
本文實(shí)例講述了jQuery簡(jiǎn)單實(shí)現(xiàn)頁(yè)面元素置頂時(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常見(jiàn)經(jīng)典特效匯總》、《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家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)說(shuō)明label]
- jquery實(shí)現(xiàn)鼠標(biāo)懸浮停止輪播特效
- jquery懸浮提示框完整實(shí)例
- 鼠標(biāo)懸浮顯示二級(jí)菜單效果的jquery實(shí)現(xiàn)
- jQuery實(shí)現(xiàn)懸浮在右上角的網(wǎng)頁(yè)客服效果代碼
- jQuery鼠標(biāo)懸浮鏈接彈出跟隨圖片實(shí)例代碼
- jQuery實(shí)現(xiàn)的簡(jiǎn)單懸浮層功能完整實(shí)例
相關(guān)文章
JSON中key動(dòng)態(tài)設(shè)置及JSON.parse和JSON.stringify()的區(qū)別
這篇文章主要介紹了JSON中key動(dòng)態(tài)設(shè)置及JSON.parse和JSON.stringify()的區(qū)別講解,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2016-12-12jQuery實(shí)現(xiàn)的隔行變色功能【案例】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的隔行變色功能,結(jié)合具體實(shí)例形式分析了jQuery事件響應(yīng)、元素遍歷及屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-02-02jQuery動(dòng)態(tài)顯示和隱藏datagrid中的某一列的方法
動(dòng)態(tài)顯示和隱藏datagrid中的某一列的方法有很多,在接下來(lái)的文章中為大家介紹下jQuery是如何實(shí)現(xiàn)的2013-12-12動(dòng)態(tài)加載jQuery的兩種方法實(shí)例分析
這篇文章主要介紹了動(dòng)態(tài)加載jQuery的兩種方法,實(shí)例分析了jquery動(dòng)態(tài)加載的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07Tinymce+jQuery.Validation使用產(chǎn)生的BUG
在IE6下,當(dāng)頁(yè)面有advanced模式的Tinymce編輯器,并且,并且jquery.validation使用了jquery.metadata時(shí)會(huì)出現(xiàn)以下問(wèn)題2010-03-03瀏覽器窗口大小變化時(shí)使用resize事件對(duì)框架不起作用的解決方法
有時(shí)候我們需要用resize事件調(diào)整瀏覽器窗口大小,但對(duì)框架卻不起作用,這里介紹下實(shí)現(xiàn)方法,需要的朋友可以參考下2014-05-05使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見(jiàn)
這篇文章主要介紹了使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見(jiàn)2016-02-02jQuery實(shí)現(xiàn)ichat在線客服插件
這篇文章主要介紹了jQuery實(shí)現(xiàn)ichat在線客服插件,需要的朋友可以參考下2014-12-12jquery實(shí)現(xiàn)手風(fēng)琴效果實(shí)例代碼
這篇文章介紹了jquery實(shí)現(xiàn)手風(fēng)琴效果實(shí)例代碼,有需要的朋友可以參考一下2013-11-11