溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“jQuery怎么實現頁面滾動時元素智能定位”，在日常操作中，相信很多人在jQuery怎么實現頁面滾動時元素智能定位問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”jQuery怎么實現頁面滾動時元素智能定位”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
我們玩網頁微博時，消息提示框一直會出現在頁面右上方，即使下拉滾動條它都會浮動定位在右上方，直到你關閉小時提示框。類似的效果在淘寶商品詳情頁面上也有，當我們下拉滾動頁面時，用來導航切換的“寶貝詳情”、“交易詳情”等一排按鈕會一直出現在瀏覽器頂部，方便我們切換導航。
本文將以淘寶網商品詳情的簡易導航為例，和大家一起分享通過jQuery和CSS實現頁面元素（要浮動的層）智能定位的效果。
Js偵聽滾動事件，當頁面滾動的距離（頁面滾動的高度）超出了對象（要滾動的層）距離頁面頂部的高度，即要滾動的層到達了瀏覽器窗口上邊緣時，立即將對象定位屬性position值改成fixed（固定）。同時為了有個好點的體驗效果，可以將對象的樣式設置陰影效果以便更好的區分浮動層與頁面內容主體。
這里需要注意的是，老前輩IE6不支持fixed，那就只能使用absolute來代替，但是這樣會有一個問題，將會導致在IE6下看不到平滑效果。我們可以通過window.XMLHttpRequest來判斷是否為IE6，因為除IE6及更低版本IE瀏覽器外，其他現代瀏覽器都支持window.XMLHttpRequest。還有就是本例中我們用css3來制造陰影效果，為了兼容IE6-IE8，你也可以使用圖片來設置陰影效果。
我們仿淘寶網的商品詳情頁面，建立一個簡易的導航條。
<p id="nav">
<ul>
<li><a href="#">寶貝詳情</a></li>
<li class="cur"><a href="#">評價詳情（123）</a></li>
<li><a href="#">成交記錄（68件）</a></li>
</ul>
</p>
為了達到滾動效果，我們應該在頁面中放置一些其他的元素或者設置body的高度，將頁面高度撐起來。
我們運用css3，將導航條包裝的稍顯正規點，當然你也可以發揮你的美工特長，讓它不那么土。注意我們使用了陰影效果的樣式.shadow，用來動態的將效果賦給浮動的對象。
#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庫文件。接著，我們按實現流程完成智能定位效果，請看代碼及注釋。
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top; //當前元素對象element距離瀏覽器上邊緣的距離
var pos = element.css("position"); //當前元素距離頁面document頂部的距離
$(window).scroll(function() { //偵聽滾動時
var scrolls = $(this).scrollTop();
if (scrolls > top) { //如果滾動到頁面超出了當前元素element的相對頁面頂部的高度
if (window.XMLHttpRequest) { //如果不是ie6
element.css({ //設置css
position: "fixed", //固定定位,即不再跟隨滾動
top: 0 //距離頁面頂部為0
}).addClass("shadow"); //加上陰影樣式.shadow
} else { //如果是ie6
element.css({
top: scrolls //與頁面頂部距離
});
}
}else {
element.css({ //如果當前元素element未滾動到瀏覽器上邊緣，則使用默認樣式
position: pos,
top: top
}).removeClass("shadow");//移除陰影樣式.shadow
}
});
};
return $(this).each(function() {
position($(this));
});
};
最后，我們調用以上效果：
$(function(){
$("#nav").smartFloat();
});
大功告成。
到此，關于“jQuery怎么實現頁面滾動時元素智能定位”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
