售前电话:022-58671858

模板小技巧商品列表页面的导航条是如何“钉”在页面顶部的?

ShopNC 原创
2015-03-31
ShopNC B2B2C商城的搜索列表页面,默认载入时,主导航条在头部,筛选排序项在商品列表上方。但当浏览者向下拉动页面查看商品时,为了还能方便用户直接点击全部分类以及排序索引...

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属性让其成为固定层保持在顶部不动从而实现我们想要的”钉“在顶部的效果。

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

产品顾问 B2B2C销售1 B2B2C销售3  

微信客服 

官方微信 

 
QQ客服咨询
销售咨询
B2B2C销售1
B2B2C销售2
解决方案
售后服务
售后服务

尊敬的用户,欢迎您光临ShopNC官方网站,很高兴您对我们的产品有兴趣。
如需体验商城具体功能,请联系客服人员 提供相关测试地址及账号。

你也可以直接拨打我们的免费热线:022-58671858立即询问。

尊敬的用户,欢迎您光临ShopNC官方网站,很高兴您对我们的产品有兴趣。
还请您填写以下信息,我们会及时给您提供详细资料和解答。

你也可以直接拨打我们的免费热线:022-58671858客服

联系人*
联系QQ*
常用邮箱*
手机号码*
验证码*
换个