欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

jQuery高亮樓層導航插件One-Page-Nav - 橫向、縱向高亮樓層導航特效

JavaScript
老白8年前2731瀏覽0評論

今天分享的這個導航插件，常用在各種電商網站模板上，用來提高查找信息的用戶體驗，特別是分類特別多的時候，用固定導航不能把所有分類行業全部一次性展示出來，這時候就需要用到今天分享的樓層導航了！

電商網站的分類比較明確，比如1樓是手機通訊產品，2樓是家用電器，3樓是服裝鞋包等等，旁邊還會有一個固定的樓層導航，這個導航列出了所有的樓層，同時還會高亮你正在瀏覽的樓層，點擊其他樓層按鈕，又會滾動到其他樓層。這樣的導航可以增加用戶體驗，讓購物更加方便快捷。

基于jQuery以及jquery.nav.js插件：

jquery.nav.zip

案例：

這三個案例，是常用的三種樓層跟隨導航菜單的樣式，下面一一分享其中的代碼：

圖一：

<!DOCTYPE html>    
<html>    
<head>    
<meta charset="utf-8">    
<title>jQuery導航插件One-Page-Nav演示-基本演示_dowebok</title>    
<style>    
* { margin: 0; padding: 0;}    
.wrap { width: 800px; margin: 0 auto; padding-bottom: 50px; font: 14px Tahoma,Helvetica,Arial,"宋體"; color: #333;}    
#nav { position: fixed; left: 20px; top: 20px; list-style-type: none; font: 14px Tahoma,Helvetica,Arial,"宋體";}    
#nav li { margin-bottom: 2px;}    
#nav a { display: block; padding: 5px 20px; color: #666; text-align: center; background-color: #ededed; text-decoration: none;}    
#nav .current a { color: #ededed; background: #666;}    
.wrap h2 { margin-bottom: 15px; padding: 10px 2px; border-bottom: 1px solid #ccc; font: 24px Tahoma,Helvetica,Arial,"Microsoft Yahei";}    
.wrap p { line-height: 24px; margin: 15px 0;}    
.wrap ul { padding-left: 1.2em; line-height: 24px;}    
.wrap .table { width: 100%; border-spacing: 0; border-collapse: collapse;}    
.wrap th, .wrap td { padding: 8px 5px; border: 1px solid #ddd;}    
.dowebok { margin-top: 50px;}    
</style>    
<script src="
http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script
>    
<script src="
http://cdn.dowebok.com/122/jquery.nav.js"></script
>    
<script>    
$(document).ready(function() {    
 $('#nav').onePageNav();    
});    
</script>    
</head>    
<body>    
<h1>jQuery導航插件One-Page-Nav演示-基本演示</h1>    
<ul id="nav">    
 <li><a href="#intro">簡介</a></li>    
 <li><a href="#usage">使用</a></li>    
 <li><a href="#options">選項</a></li>    
 <li><a href="#examples">示例</a></li>    
 <li><a href="#recommend">推薦</a></li>    
</ul>    
<div>    
 <div id="intro">    
  <h2>簡介</h2>    
  <p>電商網站的分類比較明確，比如1樓是手機通訊產品，2樓是家用電器，3樓是服裝鞋包等等，旁邊還會有一個固定的樓層導航，這個導航列出了所有的樓層，同時還會高亮你正在瀏覽的樓層，點擊其他樓層按鈕，又會滾動到其他樓層。這樣的導航可以增加用戶體驗，讓購物更加方便快捷。</p>    
  <p>如果你想在自己的頁面上也實現這樣的效果，那么可以試試 jQuery-One-Page-Nav 這款 jQuery插件，</p>    
  <p>電商網站的分類比較明確，比如1樓是手機通訊產品，2樓是家用電器，3樓是服裝鞋包等等，旁邊還會有一個固定的樓層導航，這個導航列出了所有的樓層，同時還會高亮你正在瀏覽的樓層，點擊其他樓層按鈕，又會滾動到其他樓層。這樣的導航可以增加用戶體驗，讓購物更加方便快捷。</p>    
  <p>如果你想在自己的頁面上也實現這樣的效果，那么可以試試 jQuery-One-Page-Nav 這款 jQuery插件，</p>    
 </div>    
 <div id="usage">    
  <h2>使用</h2>    
  <p>HTML</p>    
<div>    
<pre class="pre-show prettyprint linenums">&lt;ul id="nav"&gt;    
&lt;li&gt;&lt;a href="#intro"&gt;簡介&lt;/a&gt;&lt;/li&gt;    
&lt;li&gt;&lt;a href="#usage"&gt;使用&lt;/a&gt;&lt;/li&gt;    
&lt;li&gt;&lt;a href="#options"&gt;選項&lt;/a&gt;&lt;/li&gt;    
&lt;li&gt;&lt;a href="#examples"&gt;示例&lt;/a&gt;&lt;/li&gt;    
&lt;li&gt;&lt;a href="#recommend"&gt;推薦&lt;/a&gt;&lt;/li&gt;    
&lt;/ul&gt;    
&lt;div&gt;    
&lt;div id="intro"&gt;    
&lt;/div&gt;    
&lt;div id="usage"&gt;    
&lt;/div&gt;    
&lt;div id="options"&gt;    
&lt;/div&gt;    
&lt;div id="examples"&gt;    
&lt;/div&gt;    
&lt;div id="recommend"&gt;    
&lt;/div&gt;    
&lt;/div&gt;</pre>    
</div>    
<p>JavaScript</p>    
<div>    
<pre class="pre-show prettyprint linenums">$(function(){    
$('#nav').onePageNav();    
});</pre>    
</div>    
 </div>    
 <div id="options">    
  <h2>選項</h2>    
  <table>    
   <thead>    
    <tr>    
     <th>屬性/方法</th>    
     <th width="100px">類型</th>    
     <th>默認值</th>    
     <th>說明</th>    
    </tr>    
   </thead>    
   <tbody>    
    <tr>    
     <td>currentClass</td>    
     <td>字符串</td>    
     <td>'current'</td>    
     <td>導航高亮的 class</td>    
    </tr>    
    <tr>    
     <td>changeHash</td>    
     <td>布爾值</td>    
     <td>false</td>    
     <td>URL 顯示命名錨記（點擊導航顯示）</td>    
    </tr>    
    <tr>    
     <td>scrollSpeed</td>    
     <td>整數</td>    
     <td>750</td>    
     <td>動畫持續時間，以毫秒為單位</td>    
    </tr>    
    <tr>    
     <td>scrollThreshold</td>    
     <td>整數/浮點數</td>    
     <td>0.5</td>    
     <td>下一個處于瀏覽器可視區域多少比例時導航切換</td>    
    </tr>    
    <tr>    
     <td>filter</td>    
     <td>字符串</td>    
     <td>''</td>    
     <td>過濾不要的項，如 filter: ':not(.external)'</td>    
    </tr>    
    <tr>    
     <td>easing</td>    
     <td>字符串</td>    
     <td>'swing'</td>    
     <td>滾動動畫方式</td>    
    </tr>    
    <tr>    
     <td>begin</td>    
     <td>函數</td>    
     <td></td>    
     <td>滾動前的回調函數</td>    
    </tr>    
    <tr>    
     <td>end</td>    
     <td>函數</td>    
     <td></td>    
     <td>滾動后的回調函數</td>    
    </tr>    
    <tr>    
     <td>scrollChange</td>    
     <td>函數</td>    
     <td></td>    
     <td>導航切換后的回調函數</td>    
    </tr>    
   </tbody>    
  </table>    
 </div>    
 <div id="examples">    
  <h2>更多示例</h2>    
  <ul>    
   <li><a href="index2.html">基本演示</a></li>    
   <li><a href="index3.html">過濾鏈接</a></li>    
   <li><a href="index4.html">顯示命名標記</a></li>    
   <li><a href="index5.html">橫向導航</a></li>    
   <li><a href="index6.html">回調函數</a></li>    
   <li><a href="index7.html">阿里巴巴</a></li>    
   <li><a href="index8.html">京東</a></li>    
   <li>撐高度</li>    
   <li>撐高度</li>    
   <li>撐高度</li>    
   <li>撐高度</li>    
   <li>撐高度</li>    
  </ul>    
 </div>    
 <div id="recommend">    
  <h2>其他推薦</h2>    
  <ul>    
   <li><a href="
http://www.lofty888.cn/115.html">jqueryrotate
制作百度紅包大放送抽獎效果</a></li>    
   <li><a href="
http://www.lofty888.cn/77.html">jQuery
全屏滾動插件fullPage.js</a></li>    
   <li><a href="
http://www.lofty888.cn/97.html">fullPage.js
制作網易郵箱6.0介紹頁面</a></li>    
   <li><a href="
http://www.lofty888.cn/120.html">onepage-scroll
制作iPhone 5s頁面</a></li>    
   <li><a href="
http://www.lofty888.cn/93.html
">強大實用的jQuery幻燈片插件Owl Carousel</a></li>    
   <li><a href="
http://www.lofty888.cn/113.html">slick
制作17173 ChainJoy2014幻燈片</a></li>    
   <li><a href="
http://www.lofty888.cn/42.html">jQuery
時間軸/時光軸插件jqtimeline</a></li>    
   <li><a href="
http://www.lofty888.cn/118.html">onepage-scroll
 – jQuery單頁/全屏滾動插件</a></li>    
   <li><a href="
http://www.lofty888.cn/48.html">jQuery
響應式圖片畫廊插件S Gallery</a></li>    
   <li><a href="
http://www.lofty888.cn/92.html">iOS
 7標簽欄圖標Tab Bar Icons iOS 7</a></li>    
   <li><a href="
http://www.lofty888.cn/82.html">jQuery
 Lightbox效果插件Boxer</a></li>    
   <li><a href="
http://www.lofty888.cn/106.html">Select-or-Die
 – jQuery下拉框美化插件</a></li>    
   <li><a href="
http://www.lofty888.cn/103.html
">制作網易2014世界杯史話/世界杯時間軸效果</a></li>    
   <li><a href="
http://www.lofty888.cn/114.html">iOS7
元素PSD源文件下載</a></li>    
   <li><a href="
http://www.lofty888.cn/112.html">47
個扁平化圖標PSD源文件下載</a></li>    
   <li><a href="
http://www.lofty888.cn/108.html">40
個夏天元素圖標PSD/AI源文件下載</a></li>    
   <li><a href="
http://www.lofty888.cn/44.html">iOS7
扁平化圖標PSD源文件下載</a></li>    
   <li><a href="
http://www.lofty888.cn/26.html
">灰色風格Metro圖標Metrize</a></li>    
  </ul>    
 </div>    
</div>    
</div>    
</body>    
</html>

圖二：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery導航插件One-Page-Nav演示-橫向導航_dowebok</title>
<style>
* { margin: 0; padding: 0;}
.wrap { width: 800px; margin: 0 auto; padding-bottom: 50px; font: 14px Tahoma,Helvetica,Arial,"宋體"; color: #333;}
#nav { position: fixed; left: 0; top: 0; width: 100%; padding-top: 10px; text-align: center; list-style-type: none; font: 14px Tahoma,Helvetica,Arial,"宋體"; background-color: #000; font-size: 0;}
#nav li { display: inline-block; margin: 0 5px; *display: inline; zoom: 1;}
#nav a { display: inline-block; padding: 10px 30px; color: #666; text-align: center; text-decoration: none; *display: inline; zoom: 1; font-size: 14px;}
#nav .current a { color: #000; background: #fff;}
.wrap h2 { margin-bottom: 15px; padding: 10px 2px; border-bottom: 1px solid #ccc; font: 24px Tahoma,Helvetica,Arial,"Microsoft Yahei";}
.wrap p { line-height: 24px; margin: 15px 0;}
.wrap ul { padding-left: 1.2em; line-height: 24px;}
.wrap .table { width: 100%; border-spacing: 0; border-collapse: collapse;}
.wrap th, .wrap td { padding: 8px 5px; border: 1px solid #ddd;}
.dowebok { margin-top: 50px;}
</style>
<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdn.dowebok.com/122/jquery.nav.js"></script>
<script>
$(document).ready(function() {
 $('#nav').onePageNav();
});
</script>
</head>
<body>
<h1 style="margin-top: 100px;">jQuery導航插件One-Page-Nav演示-橫向導航</h1>
<ul id="nav">
 <li><a href="#intro">簡介</a></li>
 <li><a href="#usage">使用</a></li>
 <li><a href="#options">選項</a></li>
 <li><a href="#examples">示例</a></li>
 <li><a href="#recommend">推薦</a></li>
</ul>
<div>
 <div id="intro">
  <h2>簡介</h2>
  <p>電商網站的分類比較明確，比如1樓是手機通訊產品，2樓是家用電器，3樓是服裝鞋包等等，旁邊還會有一個固定的樓層導航，這個導航列出了所有的樓層，同時還會高亮你正在瀏覽的樓層，點擊其他樓層按鈕，又會滾動到其他樓層。這樣的導航可以增加用戶體驗，讓購物更加方便快捷。</p>
  <p>如果你想在自己的頁面上也實現這樣的效果，那么可以試試 jQuery-One-Page-Nav 這款 jQuery插件，</p>
  <p>電商網站的分類比較明確，比如1樓是手機通訊產品，2樓是家用電器，3樓是服裝鞋包等等，旁邊還會有一個固定的樓層導航，這個導航列出了所有的樓層，同時還會高亮你正在瀏覽的樓層，點擊其他樓層按鈕，又會滾動到其他樓層。這樣的導航可以增加用戶體驗，讓購物更加方便快捷。</p>
  <p>如果你想在自己的頁面上也實現這樣的效果，那么可以試試 jQuery-One-Page-Nav 這款 jQuery插件，</p>
  <p>電商網站的分類比較明確，比如1樓是手機通訊產品，2樓是家用電器，3樓是服裝鞋包等等，旁邊還會有一個固定的樓層導航，這個導航列出了所有的樓層，同時還會高亮你正在瀏覽的樓層，點擊其他樓層按鈕，又會滾動到其他樓層。這樣的導航可以增加用戶體驗，讓購物更加方便快捷。</p>
  <p>如果你想在自己的頁面上也實現這樣的效果，那么可以試試 jQuery-One-Page-Nav 這款 jQuery插件，</p>
 </div>
 <div id="usage">
  <h2>使用</h2>
  <p>HTML</p>
<div>
<pre class="pre-show prettyprint linenums">&lt;ul id="nav"&gt;
    &lt;li&gt;&lt;a href="#intro"&gt;簡介&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#usage"&gt;使用&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#options"&gt;選項&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#examples"&gt;示例&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#recommend"&gt;推薦&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;
    &lt;div id="intro"&gt;
    &lt;/div&gt;
    &lt;div id="usage"&gt;
    &lt;/div&gt;
    &lt;div id="options"&gt;
    &lt;/div&gt;
    &lt;div id="examples"&gt;
    &lt;/div&gt;
    &lt;div id="recommend"&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
</div>
<p>JavaScript</p>
<div>
<pre class="pre-show prettyprint linenums">$(function(){
    $('#nav').onePageNav();
});</pre>
</div>
 </div>
 <div id="options">
  <h2>選項</h2>
  <table>
   <thead>
    <tr>
     <th>屬性/方法</th>
     <th width="100px">類型</th>
     <th>默認值</th>
     <th>說明</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>currentClass</td>
     <td>字符串</td>
     <td>'current'</td>
     <td>導航高亮的 class</td>
    </tr>
    <tr>
     <td>changeHash</td>
     <td>布爾值</td>
     <td>false</td>
     <td>URL 顯示命名錨記（點擊導航顯示）</td>
    </tr>
    <tr>
     <td>scrollSpeed</td>
     <td>整數</td>
     <td>750</td>
     <td>動畫持續時間，以毫秒為單位</td>
    </tr>
    <tr>
     <td>scrollThreshold</td>
     <td>整數/浮點數</td>
     <td>0.5</td>
     <td>下一個處于瀏覽器可視區域多少比例時導航切換</td>
    </tr>
    <tr>
     <td>filter</td>
     <td>字符串</td>
     <td>''</td>
     <td>過濾不要的項，如 filter: ':not(.external)'</td>
    </tr>
    <tr>
     <td>easing</td>
     <td>字符串</td>
     <td>'swing'</td>
     <td>滾動動畫方式</td>
    </tr>
    <tr>
     <td>begin</td>
     <td>函數</td>
     <td></td>
     <td>滾動前的回調函數</td>
    </tr>
    <tr>
     <td>end</td>
     <td>函數</td>
     <td></td>
     <td>滾動后的回調函數</td>
    </tr>
    <tr>
     <td>scrollChange</td>
     <td>函數</td>
     <td></td>
     <td>導航切換后的回調函數</td>
    </tr>
   </tbody>
  </table>
 </div>
 <div id="examples">
  <h2>更多示例</h2>
  <ul>
   <li><a href="index2.html">基本演示</a></li>
   <li><a href="index3.html">過濾鏈接</a></li>
   <li><a href="index4.html">顯示命名標記</a></li>
   <li><a href="index5.html">橫向導航</a></li>
   <li><a href="index6.html">回調函數</a></li>
   <li><a href="index7.html">阿里巴巴</a></li>
   <li><a href="index8.html">京東</a></li>
   <li>撐高度</li>
   <li>撐高度</li>
   <li>撐高度</li>
   <li>撐高度</li>
   <li>撐高度</li>
  </ul>
 </div>
 <div id="recommend">
  <h2>其他推薦</h2>
  <ul>
   <li><a href="http://www.lofty888.cn/115.html">jqueryrotate制作百度紅包大放送抽獎效果</a></li>
   <li><a href="http://www.lofty888.cn/77.html">jQuery全屏滾動插件fullPage.js</a></li>
   <li><a href="http://www.lofty888.cn/97.html">fullPage.js制作網易郵箱6.0介紹頁面</a></li>
   <li><a href="http://www.lofty888.cn/120.html">onepage-scroll制作iPhone 5s頁面</a></li>
   <li><a href="http://www.lofty888.cn/93.html">強大實用的jQuery幻燈片插件Owl Carousel</a></li>
   <li><a href="http://www.lofty888.cn/113.html">slick制作17173 ChainJoy2014幻燈片</a></li>
   <li><a href="http://www.lofty888.cn/42.html">jQuery時間軸/時光軸插件jqtimeline</a></li>
   <li><a href="http://www.lofty888.cn/118.html">onepage-scroll – jQuery單頁/全屏滾動插件</a></li>
   <li><a href="http://www.lofty888.cn/48.html">jQuery響應式圖片畫廊插件S Gallery</a></li>
   <li><a href="http://www.lofty888.cn/92.html">iOS 7標簽欄圖標Tab Bar Icons iOS 7</a></li>
   <li><a href="http://www.lofty888.cn/82.html">jQuery Lightbox效果插件Boxer</a></li>
   <li><a href="http://www.lofty888.cn/106.html">Select-or-Die – jQuery下拉框美化插件</a></li>
   <li><a href="http://www.lofty888.cn/103.html">制作網易2014世界杯史話/世界杯時間軸效果</a></li>
   <li><a href="http://www.lofty888.cn/114.html">iOS7元素PSD源文件下載</a></li>
   <li><a href="http://www.lofty888.cn/112.html">47個扁平化圖標PSD源文件下載</a></li>
   <li><a href="http://www.lofty888.cn/108.html">40個夏天元素圖標PSD/AI源文件下載</a></li>
   <li><a href="http://www.lofty888.cn/44.html">iOS7扁平化圖標PSD源文件下載</a></li>
   <li><a href="http://www.lofty888.cn/26.html">灰色風格Metro圖標Metrize</a></li>
  </ul>
 </div>
</div>
</body>
</html>

圖三：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery導航插件One-Page-Nav演示-阿里巴巴_dowebok</title>
<style>
* { margin: 0; padding: 0;}
#nav { display: none; position: fixed; left: 50%; top: 20px; width: 105px; margin-left: 515px; padding-bottom: 10px; border-top: 3px solid #ff7300; list-style-type: none; font: 12px Tahoma,Helvetica,Arial,"宋體"; background-color: #f5f5f5;}
#nav li { width: 95px; height: 20px; margin: 10px auto 0; border-radius: 10px; line-height: 20px;}
#nav em { float: left; width: 22px; margin-left: 6px; text-align: center; font-style: normal;}
#nav span { float: left; width: 60px; text-align: center;}
#nav a { color: #888; text-decoration: none;}
#nav .current { background-color: #888;}
#nav .current a { color: #fff;}
.wrap h2 { margin-bottom: 15px; padding: 10px 2px; border-bottom: 1px solid #ccc; font: 24px Tahoma,Helvetica,Arial,"Microsoft Yahei";}
.wrap p { line-height: 24px; margin: 15px 0;}
.wrap ul { padding-left: 1.2em; line-height: 24px;}
.wrap .table { width: 100%; border-spacing: 0; border-collapse: collapse;}
.wrap th, .wrap td { padding: 8px 5px; border: 1px solid #ddd;}
#f0 { height: 622px; background: url(http://cdn.dowebok.com/122/alibaba1.jpg) 50% 0 no-repeat;}
#f1 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba2.jpg) 50% 0 no-repeat;}
#f2 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba3.jpg) 50% 0 no-repeat;}
#f3 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba4.jpg) 50% 0 no-repeat;}
#f4 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba5.jpg) 50% 0 no-repeat;}
#f5 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba6.jpg) 50% 0 no-repeat;}
#f6 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba7.jpg) 50% 0 no-repeat;}
#f7 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba8.jpg) 50% 0 no-repeat;}
#f8 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba9.jpg) 50% 0 no-repeat;}
#f9 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba10.jpg) 50% 0 no-repeat;}
#f10 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba11.jpg) 50% 0 no-repeat;}
#f11 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba12.jpg) 50% 0 no-repeat;}
#f12 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba13.jpg) 50% 0 no-repeat;}
#f13 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba14.jpg) 50% 0 no-repeat;}
#f14 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba15.jpg) 50% 0 no-repeat;}
#f15 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba16.jpg) 50% 0 no-repeat;}
#f16 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba17.jpg) 50% 0 no-repeat;}
#f17 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba18.jpg) 50% 0 no-repeat;}
#f18 { height: 277px; background: url(http://cdn.dowebok.com/122/alibaba19.jpg) 50% 0 no-repeat;}
#f19 { height: 449px; background: url(http://cdn.dowebok.com/122/alibaba20.jpg) 50% 0 no-repeat;}
#f20 { height: 309px; background: url(http://cdn.dowebok.com/122/alibaba21.jpg) 50% 0 no-repeat;}
#f21 { height: 504px; background: url(http://cdn.dowebok.com/122/alibaba22.jpg) 50% 0 no-repeat;}
</style>
<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdn.dowebok.com/122/jquery.nav.js"></script>
<script>
$(function() {
 $('#nav').onePageNav({
  scrollThreshold: 0.3
 });
 $(window).scroll(function(){
  if($(window).scrollTop() > 200){
   $('#nav').fadeIn();
  } else {
   $('#nav').fadeOut();
  }
 });
});
</script>
</head>
<body>
<a name="top"></a>
<ul id="nav">
 <li><a href="#f1"><em>1F</em><span>橡膠塑料</span></a></li>
 <li><a href="#f2"><em>2F</em><span>冶金鋼材</span></a></li>
 <li><a href="#f3"><em>3F</em><span>化工精細</span></a></li>
 <li><a href="#f4"><em>4F</em><span>紡織市場</span></a></li>
 <li><a href="#f5"><em>5F</em><span>包裝市場</span></a></li>
 <li><a href="#f6"><em>6F</em><span>機械五金</span></a></li>
 <li><a href="#f7"><em>7F</em><span>電子電工</span></a></li>
 <li><a href="#f8"><em>8F</em><span>照明安防</span></a></li>
 <li><a href="#f9"><em>9F</em><span>服裝內衣</span></a></li>
 <li><a href="#f10"><em>10F</em><span>鞋包配飾</span></a></li>
 <li><a href="#f11"><em>11F</em><span>數碼家電</span></a></li>
 <li><a href="#f12"><em>12F</em><span>美妝日化</span></a></li>
 <li><a href="#f13"><em>13F</em><span>童裝母嬰</span></a></li>
 <li><a href="#f14"><em>14F</em><span>家紡家裝</span></a></li>
 <li><a href="#f15"><em>15F</em><span>食品農業</span></a></li>
 <li><a href="#f16"><em>16F</em><span>日用百貨</span></a></li>
 <li><a href="#f17"><em>17F</em><span>采購必應</span></a></li>
 <li><a href="#f18"><em>18F</em><span>商務服務</span></a></li>
 <li><a href="#f19"><em>19F</em><span>以商會友</span></a></li>
</ul>
<div>
 <div id="f0"></div>
 <div id="f1"></div>
 <div id="f2"></div>
 <div id="f3"></div>
 <div id="f4"></div>
 <div id="f5"></div>
 <div id="f6"></div>
 <div id="f7"></div>
 <div id="f8"></div>
 <div id="f9"></div>
 <div id="f10"></div>
 <div id="f11"></div>
 <div id="f12"></div>
 <div id="f13"></div>
 <div id="f14"></div>
 <div id="f15"></div>
 <div id="f16"></div>
 <div id="f17"></div>
 <div id="f18"></div>
 <div id="f19"></div>
 <div id="f20"></div>
 <div id="f21"></div>
</div>
</body>
</html>