ShopNC B2B2C商城的搜索列表页面，默认载入时，主导航条在头部，筛选排序项在商品列表上方。但当浏览者向下拉动页面查看商品时，为了还能方便用户直接点击全部分类以及排序索引，导航条会固定在浏览器顶部并随之滚动。

那么这个效果是如何实现的呢？在这里我们使用了轻量级的jQuery插件Waypoints。

在程序模板..\trunk\shop\templates\default\home\search.php中引入js

并定义

//浮动导航  waypoints.js
    $('#main-nav-holder').waypoint(function(event, direction) {
        $(this).parent().toggleClass('sticky', direction === "down");
        event.stopPropagation();
    });

这里是监听右侧商品列表块为main-nav-holder的div触及浏览器顶端时，其父级层增加class=“sticky"

这样我们就可以跟原有的商品排序索引条分别定义不同的css以控制其显示效果

<nav class="sort-bar" id="main-nav">
        <div class="pagination"><!--<?php echo $output['show_page1']; ?> --></div>
        <div class="nch-all-category">
          <div class="all-category">
           <!-- <?php require template('layout/home_goods_class');?>-->
          </div>
        </div>
        <div class="nch-sortbar-array"> 排序方式：
          <ul>...</ul></div></nav>

这是模板中排序筛选条部分代码html内容对应的css文件..\trunk\shop\templates\default\css\layout.css中202行后是它的样式部分

.sort-bar { background: #F7F7F7; display: block; height: 36px; border: solid 1px #D7D7D7; }

当其父级增加了class="sticly"时,则需另一组css进行样式控制

.sticky #main-nav { background-color: #F7F7F7; width: 1200px; margin-left: -600px; border-bottom: solid 1px #DDD; position: fixed; _position: relative; top: 0; left: 50%; z-index:999; box-shadow: 0 2px 2px rgba(0,0,0,0.2);}
.sticky #main-nav ul { margin:0 auto;}
.sticky .nch-all-category { display: inline-block; *display: inline; *zoom: 1;}

可以看出 我们给这个导航条添加了position:fixed属性让其成为固定层保持在顶部不动从而实现我们想要的”钉“在顶部的效果。

这个效果还被利用在商品详情页面 产品介绍-购买记录等切换卡处以及团购页面的价格条处，这么做都是为了能方便浏览者减少浏览时的操作从而提高用户体验度。