jQuery實現的黏性滾動導航列效果
- 小云云原創
- 2018-01-09 10:26:092461瀏覽
黏性滾動是當導航在滾動過程中會佔粘於瀏覽器上，達到方便網站頁面瀏覽的效果，也是一種用戶體驗，本文主要介紹了jQuery實現的粘性滾動導航欄效果,涉及jQuery插件smint的相關使用技巧,並附帶完整實例源碼供讀者下載參考,需要的朋友可以參考下，希望能幫助到大家。
下面我們來看看是怎麼實現的：
jQuery的 smint插件，也是一個導航選單固定插件。當頁滾動時，導航選單會固定在頂部；點擊選單時，頁面會平滑的滾動到對應的區域。
相容性
由於 smint 使用了 position: fixed，所以它不相容於 IE6。適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗.
引入檔案
<link href="css/demo.css" rel="external nofollow" rel="stylesheet" type="text/css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.smint.js"></script>
HTML
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<p class="wrap">
<p class="subMenu">
<p class="inner">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="sTop" class="subNavBtn">Home</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s1" class="subNavBtn">Section 1</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s2" class="subNavBtn">Section 2</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s3" class="subNavBtn">Section 3</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s4" class="subNavBtn">Section 4</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s5" class="subNavBtn end">Section 5</a>
</p>
</p>
<p class="section sTop">
<p class="inner"></p><br class="clear">
</p>
<p class="section s1">
<p class="inner"><h1>Section 1</h1></p>
</p>
<p class="section s2">
<p class="inner"><h1>Section 2</h1></p>
</p>
<p class="section s3">
<p class="inner"><h1>Section 3</h1></p>
</p>
<p class="section s4">
<p class="inner"><h1>Section 4</h1></p>
</p>
<p class="section s5">
<p class="inner"><h1>Section 5</h1></p>
</p>
</p>
</body>
注意：選單的外部容器（如上例的subMenu）需要設定樣式position:absolute，且每個選單的a 標籤需要設定id，id 的值與下方對應區域的class 的值一致。
JavaScript
$(function() {
$('.subMenu').smint({
scrollSpeed : 1000
});
});
相關推薦：
jQuery實作導覽列頭選單項目點擊後變換顏色的方法實例詳解
JavaScript實現精美個性導航欄位筋斗雲效果的範例程式碼
以上是jQuery實現的黏性滾動導航列效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn