溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了jQuery實現的粘性滾動導航欄效果。分享給大家供大家參考，具體如下：
粘性滾動是當導航在滾動過程中會占粘于瀏覽器上，達到方便網站頁面瀏覽的效果，也是一種用戶體驗，下面我們看一下是怎么實現的：
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);">
<div class="wrap">
<div class="subMenu">
<div 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>
</div>
</div>
<div class="section sTop">
<div class="inner"></div><br class="clear">
</div>
<div class="section s1">
<div class="inner"><h2>Section 1</h2></div>
</div>
<div class="section s2">
<div class="inner"><h2>Section 2</h2></div>
</div>
<div class="section s3">
<div class="inner"><h2>Section 3</h2></div>
</div>
<div class="section s4">
<div class="inner"><h2>Section 4</h2></div>
</div>
<div class="section s5">
<div class="inner"><h2>Section 5</h2></div>
</div>
</div>
</body>
注意：菜單的外部容器（如上例的 subMenu）需要設置樣式 position:absolute，并且每個菜單的 a 標簽需要設置 id，id 的值與下面對應區域的 class 的值一致。
JavaScript
$(function() {
$('.subMenu').smint({
scrollSpeed : 1000
});
});
附：完整實例代碼點擊此處本站下載。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
