<!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. hyperVisor

    当前主要的hyperVisors:VMware vSphere.微软Hyper-V.Citrix XenServer .IBM PowerVM.Red Hat Enterprise Virtuliza ...

  2. Mitmproxy首页、文档和下载 - 支持SSL的HTTP代理 - 开源中国社区

    Mitmproxy首页.文档和下载 - 支持SSL的HTTP代理 - 开源中国社区 undefined 利用Dnspod api批量更新添加DNS解析[python脚本] - 推酷 undefined

  3. MySQL外键约束On Delete、On Update各取值的含义

    主键.外键和索引的区别?   主键 外键 索引 定义: 唯一标识一条记录,不能有重复的,不允许为空 表的外键是另一表的主键, 外键可以有重复的, 可以是空值 主索引(由关键字PRIMARY定义的索引) ...

  4. Linux下SVN命令总结

    目录 一.从版本库获取信息... 1 二.从版本库到本地... 2 三.从本地到版本库... 2 四.高级应用... 4 一.从版本库获取信息 svn help command 获取子命令说明 svn ...

  5. ThinkPHP 快速入门

    1. 框架简介 框架是程序结构代码的集合,而不是业务逻辑代码.集合中包含了很多类.函数和功能类包.这个集合是按照一定标准组成的功能体系.体系有很多设计模式,比如MVC等. 2. ThinkPHP框架学 ...

  6. PostgreSQL9.5 新特性

    PostgreSQL9.5 新特性 PostgreSQL9.5:Foreign Table Inheritance PostgreSQL9.5:Row-Level Security Policies ...

  7. 安装MYSQL 出现Error 1045 access denied 的解决方法

    操作系统:WINDOWS10 系统 数据库版本:mysql 5.x 提示:access denied for user 'root'@'localhost' using password yes/no ...

  8. Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  9. Material Design之TextInputLayout、Snackbar的使用

    这两个控件也是Google在2015 I/O大会上公布的Design Library包下的控件,使用比較简单,就放在一起讲了,但有的地方也是须要特别注意一下. TextInputLayout Text ...

  10. oracle12 pl/sql

    pl/sql块介绍 介绍   块(block)是pl/sql的基本程序单元,编写pl/sql程序实际上就是编写pl/sql块,要完成相对简单的应用功能,可能只需要编写一个pl/sql块,但是如果想要实 ...