jQuery高亮楼层导航插件One-Page-Nav - 横向、纵向高亮楼层导航特效_js/jQuery

资料来源：网络整理时间：2023/3/4 0:56:31 共计：3636 浏览

今天分享的这个导航插件，常用在各种电商网站模板上，用来提高查找信息的用户体验，特别是分类特别多的时候，用固定导航不能把所有分类行业全部一次性展示出来，这时候就需要用到今天分享的楼层导航了！

电商网站的分类比较明确，比如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="
https://www.yzktw.com.cn/115.html">jqueryrotate
制作百度红包大放送抽奖效果</a></li>    

   <li><a href="
https://www.yzktw.com.cn/77.html">jQuery
全屏滚动插件fullPage.js</a></li>    

   <li><a href="
https://www.yzktw.com.cn/97.html">fullPage.js
制作网易邮箱6.0介绍页面</a></li>    

   <li><a href="
https://www.yzktw.com.cn/120.html">onepage-scroll
制作iPhone 5s页面</a></li>    

   <li><a href="
https://www.yzktw.com.cn/93.html
">强大实用的jQuery幻灯片插件Owl Carousel</a></li>    

   <li><a href="
https://www.yzktw.com.cn/113.html">slick
制作17173 ChainJoy2014幻灯片</a></li>    

   <li><a href="
https://www.yzktw.com.cn/42.html">jQuery
时间轴/时光轴插件jqtimeline</a></li>    

   <li><a href="
https://www.yzktw.com.cn/118.html">onepage-scroll
 – jQuery单页/全屏滚动插件</a></li>    

   <li><a href="
https://www.yzktw.com.cn/48.html">jQuery
响应式图片画廊插件S Gallery</a></li>    

   <li><a href="
https://www.yzktw.com.cn/92.html">iOS
 7标签栏图标Tab Bar Icons iOS 7</a></li>    

   <li><a href="
https://www.yzktw.com.cn/82.html">jQuery
 Lightbox效果插件Boxer</a></li>    

   <li><a href="
https://www.yzktw.com.cn/106.html">Select-or-Die
 – jQuery下拉框美化插件</a></li>    

   <li><a href="
https://www.yzktw.com.cn/103.html
">制作网易2014世界杯史话/世界杯时间轴效果</a></li>    

   <li><a href="
https://www.yzktw.com.cn/114.html">iOS7
元素PSD源文件下载</a></li>    

   <li><a href="
https://www.yzktw.com.cn/112.html">47
个扁平化图标PSD源文件下载</a></li>    

   <li><a href="
https://www.yzktw.com.cn/108.html">40
个夏天元素图标PSD/AI源文件下载</a></li>    

   <li><a href="
https://www.yzktw.com.cn/44.html">iOS7
扁平化图标PSD源文件下载</a></li>    

   <li><a href="
https://www.yzktw.com.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="https://www.yzktw.com.cn/115.html">jqueryrotate制作百度红包大放送抽奖效果</a></li>
   <li><a href="https://www.yzktw.com.cn/77.html">jQuery全屏滚动插件fullPage.js</a></li>
   <li><a href="https://www.yzktw.com.cn/97.html">fullPage.js制作网易邮箱6.0介绍页面</a></li>
   <li><a href="https://www.yzktw.com.cn/120.html">onepage-scroll制作iPhone 5s页面</a></li>
   <li><a href="https://www.yzktw.com.cn/93.html">强大实用的jQuery幻灯片插件Owl Carousel</a></li>
   <li><a href="https://www.yzktw.com.cn/113.html">slick制作17173 ChainJoy2014幻灯片</a></li>
   <li><a href="https://www.yzktw.com.cn/42.html">jQuery时间轴/时光轴插件jqtimeline</a></li>
   <li><a href="https://www.yzktw.com.cn/118.html">onepage-scroll – jQuery单页/全屏滚动插件</a></li>
   <li><a href="https://www.yzktw.com.cn/48.html">jQuery响应式图片画廊插件S Gallery</a></li>
   <li><a href="https://www.yzktw.com.cn/92.html">iOS 7标签栏图标Tab Bar Icons iOS 7</a></li>
   <li><a href="https://www.yzktw.com.cn/82.html">jQuery Lightbox效果插件Boxer</a></li>
   <li><a href="https://www.yzktw.com.cn/106.html">Select-or-Die – jQuery下拉框美化插件</a></li>
   <li><a href="https://www.yzktw.com.cn/103.html">制作网易2014世界杯史话/世界杯时间轴效果</a></li>
   <li><a href="https://www.yzktw.com.cn/114.html">iOS7元素PSD源文件下载</a></li>
   <li><a href="https://www.yzktw.com.cn/112.html">47个扁平化图标PSD源文件下载</a></li>
   <li><a href="https://www.yzktw.com.cn/108.html">40个夏天元素图标PSD/AI源文件下载</a></li>
   <li><a href="https://www.yzktw.com.cn/44.html">iOS7扁平化图标PSD源文件下载</a></li>
   <li><a href="https://www.yzktw.com.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>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jQuery导航特效 - 鼠标滑过/滑动遮罩背景图片跟随_js/jQuery | ·下一条：jQuery 智能判断跟随页面滚动的导航、菜单、广告，下拉后跟随置顶特效代码_js/jQuery