<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>仿京东侧边栏</title>

     <style type="text/css">

         *{

             margin:0;padding:0;

         }

         ul{list-style: none;}

         .top,.dian,.jia,.fu,.mei,.bottom{

             width: 1210px;

             margin: 0 auto;

         }

         .subnav

         {

             position: fixed;

             width: 38px;

             height: 200px;

             top:200px;

             left:50%;

             margin-left:605px;

             /*display: none;*/

         }

         .subnav li{

             height: 36px;

             border:1px solid #DEDEDE;

             margin-bottom: 5px;

             font-size:0;

             background: url(bg.png) no-repeat;

         }

         .subnav li:hover,.subnav li.current,.back

         {

             border:1px solid #ED5759;

             background: #FDEEEE;   /* 只有冲突的时候才会出现层叠 */

             /* 背景颜色 背景图片 背景位置 背景平铺  背景固定 */

             /* css 层叠样式表 */

             font-size:12px;

             color: #ED5759;

             padding-left: 6px;

             padding-top: 2px;

             height: 34px;

             cursor: pointer;

         }

     </style>

     <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

     <script type="text/javascript">

 //     1.先找到响应的小图标；

 //     2.先让页面滚动的时候，滚动到响应的小图标那里；

 //     3.设置点击事件

         $(function(){

             var $menu=$('.subnav');

             var $list=$('.subnav li');

             var top=0;

             var num=0;

            $list.each(function(index,ele){

                var num=index*55;

                $list.css({

                   "background-position":0,num

                });

            });

             $(window).scroll(function(){

                 var top=$(document).scrollTop();

                 if(top> $('.mei').offset().top){

                     $list.eq(3).addClass('current').siblings().removeClass();

                 }else if(top> $('.fu').offset().top){

                     $list.eq(2).addClass('current').siblings().removeClass();

                 } else if(top>= $(".jia").offset().top){

                     $list.eq(1).addClass("current").siblings().removeClass();

                 } else if(top >= $(".dian").offset().top){

                     $list.eq(0).addClass("current").siblings().removeClass();

                 }else if(top>0){

                     $menu.fadeIn();

                 }else{

                     $menu.fadeOut();

                 }

             });

             $list.click(function(){

                 $('html,body').stop().animate({

                     'scrollTop':$('.jd').eq($(this).index()).offset().top

                 },1000);

             });

             $('.back').click(function(){

                 $('html,body').animate({

                     'scrollTop':0

                 },300);

             })

         })

     </script>

 </head>

 <body>

 <div class="top">

     <img src="top.png" alt="" />

 </div>

 <div class="jd dian">

     <img src="dian.png" alt="" />

 </div>

 <div class="jd jia">

     <img src="jia.png" alt="" />

 </div>

 <div class="jd fu">

     <img src="fu.png" alt="" />

 </div>

 <div class="jd mei">

     <img src="mei.png" alt="" />

 </div>

 <div class="bottom">

     <img src="bottom.png" alt="" />

 </div>

 <div class="subnav">

     <ul>

         <li>电脑数码</li>

         <li>家电通讯</li>

         <li>服饰精品</li>

         <li>美容珠宝</li>

     </ul>

     <div class="back">返回</div>

 </div>

 </body>

 </html>

jquery实现仿京东侧边栏的更多相关文章

  1. jQuery实际案例⑤——仿京东侧边栏（楼层）

    楼层:①页面滑动到哪块儿“楼层”就显示到哪个:②点击某“楼层”页面滚动到对应的位置:③点击“返回”回到页面顶部 实现:①使用$(window).scroll(function(){ });  //监视 ...

  2. jQuery实现仿京东商城图片放大镜

    效果图: 不废话直接上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. jQuery仿京东无限级菜单HoverTree

    官方网址:http://keleyi.com/jq/hovertree/ 效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list ...

  4. jQuery仿京东首页广告图片切换图片轮播

    1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. Jquery特效之=》仿京东多条件筛选特效

    仿京东多条件筛选特效 * { margin: 0; padding: 0; list-style-type: none } a, img { border: 0 } body { font: 12px ...

  6. js 鼠标滚动到某屏时，加载那一屏的数据，仿京东首页楼层异步加载模式

    js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...

  7. 仿京东树形菜单插件hovertree

    hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http://ke ...

  8. ThinkPHP3.2开发仿京东商城项目实战视频教程

    ThinkPHP3.2仿京东商城视频教程实战课程,ThinkPHP3.2开发大型商城项目实战视频 第一天 1.项目说明 2.时间插件.XSS过滤.在线编辑器使用 3.商品的删除 4.商品的修改完成-一 ...

  9. div css仿京东订单流程图样式代码

    效果展示 http://hovertree.com/texiao/css/25/ 本效果适合PC,也适合移动端 手机扫描二维码查看效果: 效果图: 代码如下: <!DOCTYPE html> ...

随机推荐

  1. vue 通信方式汇总

    1.10种通信方式 10种:https://juejin.im/post/5bd18c72e51d455e3f6e4334 2.除此之外,还有children和ref. 需要注意 $children  ...

  2. JqGrid获得所有选中行数据ID数组，获取所有行的ID数组

    获得选中行的ID数组:var ids = $("jqgridtableid").jqGrid('getGridParam','selarrrow'); 获得所有行的ID数组:var ...

  3. SoapUI 测试接口演示

      SoapUI 测试接口演示 CreateTime--2018年4月2日15:54:05 Author:Marydon 以webservice为例 1.安装:  SoapUI-x64-5.4.0-E ...

  4. Java面试基础部分合集

    写在前面:这篇文章对于在Java方面已经很牛逼的大手,就没必要看了,因为对于你们来说,这tm简直太简单了.... 面试我们都经历过,你真的懂面试吗?针对面试我只想说一点,面试的目的不是让考官知道你怎么 ...

  5. js访问url和cookie

    function QueryString() { var data = []; this.Read = function() { var aPairs, aTmp; var queryString = ...

  6. 微软解决方案框架 - MSF的团队模型、MSF的开发模型，关于SA系统分析师信息的一篇好帖子

    msf中的开发模型 书中关于六个小组的人员的案例: MSF 组队模型 v. 3.1-http://bbs.51cto.com/thread-1171-1.html 微软解决方案框架 - MSF的团队模 ...

  7. Ubuntu用户root密码设置

    我们在安装Ubuntu后发现个问题,就是不像Linux系统那样会在安装过程中设置root的密码,那以后如果需要root的权限时该如何操作呢? Ubuntu里有个命令叫sudo,是以管理员的身份运行命令 ...

  8. RabbitMQ消息队列（一）: Detailed Introduction 详细介绍[转]

    1. 历史 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然在同步消息通讯的世界里有 ...

  9. BIP_BI Pubisher的基本语法（概念）

    2014-05-31 Created By BaoXinjian

  10. Oschina 安卓client源代码学习之中的一个

    今天主要研究一下两个功能 (1)双击返回键退出程序 (2)接近完美地退出程序 (1) 在非常多应用程序里都有一个功能,就是点击返回键,之后提示你再点击返回键就退出程序. 之前一直非常好奇这是怎么实现的 ...