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

    <<learning opencv>>,   布拉德斯基 (Bradski.G.) (作者), 克勒 (Kaehler.A.) (作者),   这本书一定要第二版的,因为第二版 ...

  2. HOST1PLUS 的 VPS 主機－絕佳的性能和特惠的價格

    HOST1PLUS 的 VPS 主機-絕佳的性能和特惠的價格 undefined Open Container Project undefined 80后美女董事长吴艳:嫁得好不一定比干得好容易 - ...

  3. python Day 1 - 搭建开发环境

    搭建开发环境 首先,确认系统安装的Python版本是2.7.x: $ python --version Python 2.7.5 然后,安装开发Web App需要的第三方库: 前端模板引擎jinja2 ...

  4. Activiti5.16.4数据库表结构

    一.ACTIVITI 数据库E-R图(5.16.4) Activiti 5.16.4 总共有24张表,增加act_evt_log(事件日志),以及增加了对SasS的支持. 在流程定义.运行实例和历史的 ...

  5. window mac iPhone 三种比较相似的字体

    win: 华文黑体 mac:stheiti iphone:heitisc-light heitisc-medium

  6. 配置SSH免密码验证

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/5183803. ...

  7. HTML+CSS基础学习笔记（8）

    一.水平居中设置--行内元素 如果设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置text-align:center来实现的 二.水平居中设置 --定宽块状元素 #当被设置元素为块状元素时 ...

  8. javascript闭包分析

    闭包是什么?闭包是Closure,简而言之,闭包就是: 闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在. 闭包就是就是函数的“堆栈”在函数返回后并不释放,我们也可以理解为这些函数堆 ...

  9. 【jQuery】用jQuery给文本框添加只读属性【readOnly】

    <input id="id" type="text" /> jQuery( $("#ID").attr({ readonly: ...

  10. C#中有关字符串去重的解决方案

    今天在群里看到一个同学的面试题 题目中有一个这样的要求 //本地有个文档文件a.txt里面包含的内容分为一段字符串"abacbacde"请编写一个程序,获取文件得到对应的内容,并对 ...