<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery滚动面板的实现</title>

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

    <style type="text/css">

        *{padding: 0; margin: 0;list-style: none;}

        #wrap{background: red; width: 500px; height: 3000px; margin: 0 auto;}

        h2{margin-bottom: 1000px;}

        #nav{width: 50px;height: 150px; border: 1px solid blue; position: fixed;bottom: 0;right: 0;}

        #nav li{border-bottom: 1px solid blue; height: 50px; text-align: center; line-height: 50px; font-size: 30px;}

        #nav li a{text-decoration: none;}

        /*预定义样式，表示所处的楼层*/

        .current{background:blue;}

        .current a{color: white;}

    </style>

</head>

<script type="text/javascript">

    $(function(){

        $("#nav li").hover(function() {

            $(this).addClass('current');

        }, function() {

            $(this).removeClass('current');

        });

        //通过判断滚动条的高度和楼层高度来制定样式。

        $(window).scroll(function() {

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

            //第二个标题1022，第三个标题2048;

            //用于添加样式的函数。

            function addStyle(index){

                $("#nav li").removeClass();

                $("#nav li:eq("+index+")").addClass('current');

            }

            if (top<=1022) {

                addStyle(0);

            }else if (top>1022 && top<=2048) {

                addStyle(1);

            }else if (top>2048) {

                addStyle(2);

            };

        });

    });

</script>

<body>

    <div id="wrap">

        <h2 class="num1" id="target1">这是第一个标题</h2>

        <h2 class="num2" id="target2">这是第二个标题</h2>

        <h2 class="num3" id="target3">这是第三个标题</h2>

    </div>

    <ul id="nav">

        <li class="current"><a href="#target1">1F</a></li>

        <li><a href="#target2">2F</a></li>

        <li><a href="#target3">3F</a></li>

    </ul>

</body>

</html>

jQuery实现商品楼层的感觉的更多相关文章

  1. jQuery右侧悬浮楼层滚动 电梯菜单

    http://www.kaiu.net/effectCon.aspx?id=2198 <!doctype html> <html> <head> <meta ...

  2. jquery实现商品sku多属性选择（商品详情页）

    转载于https://blog.csdn.net/csdn924618338/article/details/51455595 实现效果 源码 <!DOCTYPE HTML> <ht ...

  3. jQuery实现商品详情 详细参数页面切换

    利用index实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  4. jquery特效 商品SKU属性规格选择实时联动

    转载,原文链接 功能:各种属性的值选中后,SKU填写表格进行变动,对属性.属性值的数量自适应,编辑时不因去掉勾选导致原有值不显示 所有代码均属原创,现在共享,如果有更好的实现方式,希望互相交流 最终实 ...

  5. jquery的商品首页

    js代码: $(function() { /*新闻滚动*/ var $this = $('.scrollNews'); var scrollTimer; $this.hover(function () ...

  6. 商品描述（动画）--- jQuery

    本文章实现是基于jQuery展示商品描述的一个功能 (1)鼠标移入显示描述内容,鼠标移开内容隐藏.先来看看一个先后效果. (2)jQuery所以的文件可以自行下载,也可以在我主页找到文件,右键文件名复 ...

  7. Jquery开发电商网站实战（带源码）

    组件化思想,包含: 下拉菜单项封装 + 按需加载 搜索功能组件化,显示数据 + 下拉显示 + 缓存 分类导航按需加载 幻灯片效果组件封装及按需加载 商品楼层模块组件化 + 商品数据按需加载 + Tab ...

  8. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  9. 《锋利的jQuery》（第2版）读书笔记4

    第9章 jQuery Mobile jQuery Mobile是用来填补jQuery在移动设备应用上的缺憾的一个新项目. 它基于jQuery框架并使用HTML5和CSS3这些新的技术,除了能提供很多基 ...

随机推荐

  1. UVA 6199 不定根最小树形图

    首先是最小树形图的介绍. 看这个博客.最小树形图 上面介绍的很详细了,我就讲一下这道题的题意. 首先给出一些二维点坐标,这些坐标之间构成一些有向图,根据题意,假设两个点a(x1 ,y1) ,b(x2 ...

  2. MFC发送自定义消息-PostMessage和SendMessage

    PostMessage:把消息投放到线程的消息队列,不能消息被处理就立即返回SendMessage:消息被处理完后才返回 几种发送消息的写法:   ::PostMessage(GetSafeHwnd( ...

  3. linux_tomcat7服务器日志爆满导致java崩溃的问题

    在linux服务器上部署Tomcat后,运行久了,catalina.out文件会越来越大,对系统的稳定造成了一定的影响. 最近刚刚出现了某台linux服务器上的java应用都假死或挂掉 然后我在输入命 ...

  4. 关于T-SQL重编译那点事，WITH RECOMPILE和OPTION(RECOMPILE)区别仅仅是存储过程级重编译和SQL语句级重编译吗

    本文出处:http://www.cnblogs.com/wy123/p/6262800.html   在考虑重编译T-SQL(或者存储过程)的时候,有两种方式可以实现强制重编译(前提是忽略导致重编译的 ...

  5. java获得项目绝对路径

    在jsp和class文件中调用的相对路径不同. 在jsp里,根目录是WebRoot 在class文件中,根目录是WebRoot/WEB-INF/classes 当然你也可以用System.getPro ...

  6. 色情不是我的所有——在法律边缘起舞的 FC2

    [核心提示] 世界上最大的色情站点之中的一个这项「殊荣」只是是 FC2 无心插柳被用户戴上的一顶帽子,这个从 1999 年成立至今已经超过 15 年历史的互联网活化石,远比你想象中更加高深莫測. 一个 ...

  7. 基于物联网技术和RFID电子客票的铁路自己主动检票机

    前言: RFID电子客票具有检阅速度快.信息量大.安全性高和高速物理定位的独特优势,随着标准的统一和成本的减少,它在铁路上有着巨大的应用前景,同一时候鉴于车站对物联网化的需求,我们设想出新一代的检票机 ...

  8. 距离矢量路由协议举例——RIP

    1. 工作原理 •RIP 是一种分布式的基于距离矢量的路由选择协议. •RIP 协议要求网络中的每个路由器都要维护从它自己到其它每个目的网络的距离记录. •RIP 协议中的"距离" ...

  9. uva-10487 - Closest Sums

    暴力枚举后去重最后二分加推断找答案 #include<iostream> #include<map> #include<string> #include<cs ...

  10. [Usaco2006 Nov]Corn Fields牧场的安排 壮压DP

    看到第一眼就发觉是壮压DP 然后就三进制枚举子集吧. 这题真是壮压入门好题... 对于dp[i][j] 表示第i行,j状态下前i行的分配方案数. 那么dp[i][j]肯定是从i-1行转过来的 那么由于 ...