jQuery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)智能浮動(dòng)定位
話(huà)不多說(shuō),請(qǐng)看代碼:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)層智能浮動(dòng)定位_前端開(kāi)發(fā)</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font: 12px/1.8 Arial; color: #666; } h1.tit-h1 { font-size: 38px; text-align: center; margin: 30px 0 15px; color: #f60; } .wrap { border: 1px dashed #ccc; background: #f8f8f8; padding: 20px; } .demo { height: 1500px; } .float { width: 80px; padding: 10px; border: 1px solid #ffecb0; background-color: #fffee0; -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.2); box-shadow: 1px 1px 2px rgba(0,0,0,.2); position: absolute; right: 10%; top: 131px; } </style> <script type="text/javascript" src="../..content/js/jquery-1.4.4.min.js"></script> </head> <body> <h1 class="tit-h1">jQuery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)層智能浮動(dòng)定位_前端開(kāi)發(fā)</h1> <div class="wrap"> <div class="demo"></div> <div class="float" id="float">我在這里等你噢!</div> </div> <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> </div> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-20541395-2']); _gaq.push(['_trackPageview']); (function () { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
jQuery 動(dòng)態(tài)云標(biāo)簽插件
這里推薦給大家一款jquery動(dòng)態(tài)云標(biāo)簽的插件,非常的炫,在指定塊級(jí)元素內(nèi)動(dòng)態(tài)生成a標(biāo)簽,a標(biāo)簽的高度、寬度、位置、層數(shù)、背景顏色隨機(jī)可控,a標(biāo)簽漸隱顯示和漸隱消失,可改變初始化的透明度,鼠標(biāo)懸浮停止動(dòng)畫(huà)且透明度最大,層數(shù)最高,鼠標(biāo)離開(kāi),恢復(fù)之前狀態(tài)2014-11-11用Jquery實(shí)現(xiàn)滾動(dòng)新聞
此文主要用Jquery實(shí)現(xiàn)滾動(dòng)新聞,Jquery的強(qiáng)大功能,幾行代碼即可實(shí)現(xiàn),需要的朋友可以參考下2014-02-02jQuery實(shí)現(xiàn)注冊(cè)會(huì)員時(shí)密碼強(qiáng)度提示信息功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)注冊(cè)會(huì)員時(shí)密碼強(qiáng)度提示信息功能,涉及jQuery事件響應(yīng)及字符串的遍歷、運(yùn)算與判斷等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09JQuery防止退格鍵網(wǎng)頁(yè)后退的實(shí)現(xiàn)代碼
有時(shí)我們需要防止退格鍵的網(wǎng)頁(yè)后退,一般情況下最好不要這么用,因?yàn)閷?duì)UX體驗(yàn)不好2012-03-03JQuery實(shí)現(xiàn)自定義滾動(dòng)條的方法
這篇文章主要給大家介紹了關(guān)于JQuery實(shí)現(xiàn)自定義滾動(dòng)條的方法,通過(guò)本文的介紹你可以換掉千篇一律的默認(rèn)滾動(dòng)條,讓你的網(wǎng)站或web項(xiàng)目更具特色,文章通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06jquery實(shí)現(xiàn)點(diǎn)擊消失的代碼
這篇文章主要介紹了jquery如何實(shí)現(xiàn)點(diǎn)擊消失,需要的朋友可以參考下2014-03-03基于jquery的獲取mouse坐標(biāo)插件的實(shí)現(xiàn)代碼
用jquery實(shí)現(xiàn)的獲取mouse坐標(biāo)的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-04-04jQuery之DOM對(duì)象和jQuery對(duì)象的轉(zhuǎn)換與區(qū)別分析
這篇文章主要介紹了jQuery之DOM對(duì)象和jQuery對(duì)象的轉(zhuǎn)換與區(qū)別分析,對(duì)比分析了DOM對(duì)象和jQuery對(duì)象的原理與用法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01