快捷導(dǎo)航

jQuery實(shí)現(xiàn)的粘性滾動(dòng)導(dǎo)航欄效果實(shí)例【附源碼下載】

更新時(shí)間：2017年10月19日 12:04:18 作者：寒意

這篇文章主要介紹了jQuery實(shí)現(xiàn)的粘性滾動(dòng)導(dǎo)航欄效果,涉及jQuery插件smint的相關(guān)使用技巧,并附帶完整實(shí)例源碼供讀者下載參考,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)的粘性滾動(dòng)導(dǎo)航欄效果。分享給大家供大家參考，具體如下：

粘性滾動(dòng)是當(dāng)導(dǎo)航在滾動(dòng)過(guò)程中會(huì)占粘于瀏覽器上，達(dá)到方便網(wǎng)站頁(yè)面瀏覽的效果，也是一種用戶體驗(yàn)，下面我們看一下是怎么實(shí)現(xiàn)的：

jQuery的 smint插件，也是一個(gè)導(dǎo)航菜單固定插件。當(dāng)頁(yè)滾動(dòng)時(shí)，導(dǎo)航菜單會(huì)固定在頂部；當(dāng)點(diǎn)擊菜單時(shí)，頁(yè)面會(huì)平滑的滾動(dòng)到對(duì)應(yīng)的區(qū)域。

兼容性

由于 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"><h1>Section 1</h1></div>
  </div>
  <div class="section s2">
    <div class="inner"><h1>Section 2</h1></div>
  </div>
  <div class="section s3">
    <div class="inner"><h1>Section 3</h1></div>
  </div>
  <div class="section s4">
    <div class="inner"><h1>Section 4</h1></div>
  </div>
  <div class="section s5">
    <div class="inner"><h1>Section 5</h1></div>
  </div>
</div>
</body>

注意：菜單的外部容器（如上例的 subMenu）需要設(shè)置樣式 position:absolute，并且每個(gè)菜單的 a 標(biāo)簽需要設(shè)置 id，id 的值與下面對(duì)應(yīng)區(qū)域的 class 的值一致。

JavaScript

$(function() {
  $('.subMenu').smint({
    scrollSpeed : 1000
  });
});

附：完整實(shí)例代碼點(diǎn)擊此處本站下載。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

這篇文章主要介紹了jquery實(shí)現(xiàn)無(wú)限分級(jí)橫向?qū)Ш讲藛蔚姆椒?實(shí)例分析了基于jQuery插件操作html與對(duì)應(yīng)樣式實(shí)現(xiàn)導(dǎo)航菜單效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03

jQuery中before()方法用法實(shí)例

這篇文章主要介紹了jQuery中before()方法用法,以實(shí)例形式分析了before()方法的功能、定義與具體使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

2014-12-12

jQuery實(shí)現(xiàn)的選擇商品飛入文本框動(dòng)畫效果完整實(shí)例

這篇文章主要介紹了jQuery實(shí)現(xiàn)的選擇商品飛入文本框動(dòng)畫效果,結(jié)合完整實(shí)例形式分析了jQuery動(dòng)態(tài)操作頁(yè)面元素屬性實(shí)現(xiàn)動(dòng)畫效果的方法,涉及jQuery的事件綁定、元素遍歷及屬性操作等相關(guān)技巧,需要的朋友可以參考下

2016-08-08