<!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. oracle查看表锁及解锁

    --kill session语句 1 alter system kill SESSION '2171,60490'; --以下几个为相关表 1 2 3 4 5 6 7 SELECT * FROM v$ ...

  2. Spark RDD/Core 编程 API入门系列之map、filter、textFile、cache、对Job输出结果进行升和降序、union、groupByKey、join、reduce、lookup（一）

    1.以本地模式实战map和filter 2.以集群模式实战textFile和cache 3.对Job输出结果进行升和降序 4.union 5.groupByKey 6.join 7.reduce 8. ...

  3. ios 实现跳转到评价界面的两种方式

    要想在App内跳转到特定App的详情页或者评论页,首先需要获取到App的id.在 iTunes Connect网站上登陆之后,选择“我的App”,然后点击某个特定的App进入,在App信息的综合信息中 ...

  4. WebService基于SoapHeader实现安全认证（一）

    本文转载:http://www.cnblogs.com/houleixx/archive/2009/08/22/webservice-soapheader-security.html WebServi ...

  5. CVPR2013-reading list

    Detection Evolution with Multi-order Contextual Co-occurrence. How to build high-level features for ...

  6. [TypeScript] Reflection and Decorator Metadata

    TypeScript allows you to emit decorator metadata which enables more powerful features through reflec ...

  7. apache kafka源码分析-Producer分析---转载

    原文地址:http://www.aboutyun.com/thread-9938-1-1.html 问题导读1.Kafka提供了Producer类作为java producer的api,此类有几种发送 ...

  8. request对象

    Servlet三大域对象的应用 request.session.application(ServletContext) 请求转发器: public void doGet(HttpServletRequ ...

  9. safe_mode（php安全模式）

    简单说,PHP安全模式就是以安全模式运行php. php的安全模式提供一个基本安全的共享环境,在一个有多个用户帐户存在的php开放的web服务器上.当一个web服务器上运行的php打开了安全模式,那么 ...

  10. Java基础知识强化之IO流笔记30：字节流4种方式复制mp4并测试效率

    1. 需求:把e:\\哥有老婆.mp4 复制到当前项目目录下的copy.mp4中 字节流四种方式复制文件: • 基本字节流一次读写一个字节 • 基本字节流一次读写一个字节数组 • 高效字节流一次读写一 ...