<!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. HOWTO: Setup XCode 6.1 to work with OpenCV3 libraries

    HOWTO: Setup XCode 6.1 to work with OpenCV3 libraries Overview This post demonstrates how to setup y ...

  2. 校友信息管理&SNS互动平台之前言、目录及说明

    开篇 刚刚主持完成了某985大学(为了保密和避免广告嫌疑,此处不指出具体大学的名称)的“校友信息管理系统&SNS互动平台”大型项目,本着总结经验,技术共享的原则,本系列文章将全面介绍该项目的需 ...

  3. [学习笔记]设计模式之Builder

    写在前面 为方便读者,本文已添加至索引: 设计模式 学习笔记索引 作为一个新入职的魔导士呢,哦不,是程序员,我以为并没有太多机会去设计项目的软件架构.但是,工作一段时间之后,自己渐渐意识到,哪怕是自己 ...

  4. HTML5和CSS3不仅仅是两项新的Web技术标准

    HTML5和CSS3不仅仅是两项新的Web技术标准 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已 ...

  5. win10清理C盘

    用win10系统也不是很久,发现C盘容量越来越小了,于是乎扫描了一下,发现有两个文件容量很大 C:/hiberfil.syssize:1660444672 C:/swapfile.syssize:26 ...

  6. MATLAB中导入数据：importdata函数

    用load函数导入mat文件大家都会.可是今天我拿到一个数据,文件后缀名竟然是'.data'.该怎么读呢? 我仅仅好用matlab界面Workspace区域的"import data&quo ...

  7. [TypeScript] Configuring a New TypeScript Project

    This lesson walks you through creating your first .tsconfig configuration file which will tell the T ...

  8. mybatis01

    mybatis是一个java持久层框架,java中操作关系型 数据库用的是jdbc,mybatis是对jdbc的一个封装. jdk1..0_72 eclipse:eclipse-3.7-indigo ...

  9. hibernate之.hbm.xml文件内容相关参数说明

    1.<id> 表示主键,下面介绍主键的生成机制 Increment: 由hibernate自动以递增的方式生成表识符,每次增量为1 Identity:由底层数据库生成表识符.条件是数据库支 ...

  10. LabVIEW系列——自定义错误

    1.自定义错误代码文本文件在labview中三处:      a).E:\Program Files\National Instruments\LabVIEW 8.6\project\errors   ...