jQuery怎么實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)元素智能定位

這篇文章主要介紹“jQuery怎么實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)元素智能定位”，在日常操作中，相信很多人在jQuery怎么實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)元素智能定位問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”jQuery怎么實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)元素智能定位”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

我們玩網(wǎng)頁(yè)微博時(shí)，消息提示框一直會(huì)出現(xiàn)在頁(yè)面右上方，即使下拉滾動(dòng)條它都會(huì)浮動(dòng)定位在右上方，直到你關(guān)閉小時(shí)提示框。類似的效果在淘寶商品詳情頁(yè)面上也有，當(dāng)我們下拉滾動(dòng)頁(yè)面時(shí)，用來(lái)導(dǎo)航切換的“寶貝詳情”、“交易詳情”等一排按鈕會(huì)一直出現(xiàn)在瀏覽器頂部，方便我們切換導(dǎo)航。

本文將以淘寶網(wǎng)商品詳情的簡(jiǎn)易導(dǎo)航為例，和大家一起分享通過(guò)jQuery和CSS實(shí)現(xiàn)頁(yè)面元素（要浮動(dòng)的層）智能定位的效果。

實(shí)現(xiàn)過(guò)程

Js偵聽(tīng)滾動(dòng)事件，當(dāng)頁(yè)面滾動(dòng)的距離（頁(yè)面滾動(dòng)的高度）超出了對(duì)象（要滾動(dòng)的層）距離頁(yè)面頂部的高度，即要滾動(dòng)的層到達(dá)了瀏覽器窗口上邊緣時(shí)，立即將對(duì)象定位屬性position值改成fixed（固定）。同時(shí)為了有個(gè)好點(diǎn)的體驗(yàn)效果，可以將對(duì)象的樣式設(shè)置陰影效果以便更好的區(qū)分浮動(dòng)層與頁(yè)面內(nèi)容主體。

這里需要注意的是，老前輩IE6不支持fixed，那就只能使用absolute來(lái)代替，但是這樣會(huì)有一個(gè)問(wèn)題，將會(huì)導(dǎo)致在IE6下看不到平滑效果。我們可以通過(guò)window.XMLHttpRequest來(lái)判斷是否為IE6，因?yàn)槌齀E6及更低版本IE瀏覽器外，其他現(xiàn)代瀏覽器都支持window.XMLHttpRequest。還有就是本例中我們用css3來(lái)制造陰影效果，為了兼容IE6-IE8，你也可以使用圖片來(lái)設(shè)置陰影效果。

HTML

我們仿淘寶網(wǎng)的商品詳情頁(yè)面，建立一個(gè)簡(jiǎn)易的導(dǎo)航條。

<p id="nav">    <ul>    <li><a href="#">寶貝詳情</a></li>        <li class="cur"><a href="#">評(píng)價(jià)詳情（123）</a></li>        <li><a href="#">成交記錄（68件）</a></li>    </ul> </p>

為了達(dá)到滾動(dòng)效果，我們應(yīng)該在頁(yè)面中放置一些其他的元素或者設(shè)置body的高度，將頁(yè)面高度撐起來(lái)。

CSS

我們運(yùn)用css3，將導(dǎo)航條包裝的稍顯正規(guī)點(diǎn)，當(dāng)然你也可以發(fā)揮你的美工特長(zhǎng)，讓它不那么土。注意我們使用了陰影效果的樣式.shadow，用來(lái)動(dòng)態(tài)的將效果賦給浮動(dòng)的對(duì)象。

#nav{width:720px; height:42px; position:absolute; margin-left:20px; border:1px solid #d3d3d3; background:#f7f7f7;-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } #nav li{float:left; height:42px; line-height:42px; padding:0 10px; border-right: 1px solid #d3d3d3; font-size:14px; font-weight:bold} #nav li.cur{background:#f1f1f1; border-top:1px solid #f60} #nav li a{text-decoration:none;} #nav li.cur a{color:#333} #nav li a:hover{color:#f30} .shadow{-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);}

jQuery

本例中依賴jQuery庫(kù)，所以必須先引入jQuery庫(kù)文件。接著，我們按實(shí)現(xiàn)流程完成智能定位效果，請(qǐng)看代碼及注釋。

$.fn.smartFloat = function() { var position = function(element) { var top = element.position().top; //當(dāng)前元素對(duì)象element距離瀏覽器上邊緣的距離        var pos = element.css("position"); //當(dāng)前元素距離頁(yè)面document頂部的距離 $(window).scroll(function() { //偵聽(tīng)滾動(dòng)時(shí) var scrolls = $(this).scrollTop(); if (scrolls > top) { //如果滾動(dòng)到頁(yè)面超出了當(dāng)前元素element的相對(duì)頁(yè)面頂部的高度 if (window.XMLHttpRequest) { //如果不是ie6 element.css({ //設(shè)置css position: "fixed", //固定定位,即不再跟隨滾動(dòng) top: 0 //距離頁(yè)面頂部為0 }).addClass("shadow"); //加上陰影樣式.shadow } else { //如果是ie6 element.css({ top: scrolls  //與頁(yè)面頂部距離 }); } }else { element.css({ //如果當(dāng)前元素element未滾動(dòng)到瀏覽器上邊緣，則使用默認(rèn)樣式 position: pos, top: top }).removeClass("shadow");//移除陰影樣式.shadow } }); }; return $(this).each(function() { position($(this)); }); };

最后，我們調(diào)用以上效果：

$(function(){ $("#nav").smartFloat(); });

大功告成。

到此，關(guān)于“jQuery怎么實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)元素智能定位”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！