<!DOCTYPE html>

<html>

<head>

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        a {

            color: #000;

            text-decoration: none;

        }

        .list {

            display: none;

            width: 50px;

            position: fixed;

            height: 150px;

            left: 0;

            top: 50%;

            margin-top: -75px;

        }

        ul {

            list-style: none;

            border: 1px solid #ccc;

        }

        li {

            height: 50px;

            line-height: 50px;

        }

        li a {

            display: block;

            width: 100%;

            height: 100%

        }

        .n2 {

            border: 1px solid #ccc;

            border-left: 0;

            border-right: 0

        }

        li.active a {

            background-color: green;

            color: #fff;

        }

        .long {

            width: 500px;

            height: 800px;

        }

        .con {

            margin-left: 300px;

        }

        .floor {

            height: 500px;

            width: 500px;

            background: red;

        }

        .floor span {

            display: block;

            width: 100%;

            height: 50px;

            line-height: 50px;

            font-size: 25px;

            /*animation:scaleDisc 1s;*/

        }

        @-webkit-keyframes scaleDisc {

            0% {

                opacity: 0;

                height: 0

            }

            100% {

                opacity: 1;

                height: 50px

            }

        }

        @-moz-keyframes scaleDisc {

            0% {

                opacity: 0;

                height: 0

            }

            100% {

                opacity: 1;

                height: 50px

            }

        }

        @keyframes scaleDisc {

            0% {

                opacity: 0;

                height: 0

            }

            100% {

                opacity: 1;

                height: 50px

            }

        }

    </style>

    <meta charset="utf-8">

    <title>楼层效果</title>

</head>

<body>

<div class="list">

    <ul>

        <li><a href="#floor1" class="smooth">楼层1</a></li>

        <li class="n2"><a href="#floor2" class="smooth">楼层2</a></li>

        <li><a href="#floor3" class="smooth">楼层3</a></li>

    </ul>

</div>

<div class="long">

    内容区

</div>

<div class="con">

    <div class="long1 floor" id="floor1">

        <span>楼层1</span>

    </div>

    <div class="long2 floor" id="floor2">

        <span>楼层2</span>

    </div>

    <div class="long3 floor" id="floor3">

        <span>楼层3</span>

    </div>

</div>

</body>

<script src="jquery-1.11.3.min.js"></script>

<script>

    $(function () {

        $(window).scroll(function () {

            var clientH = $(window).height();

            var $scroll = $(window).scrollTop();

            //判断当楼层内容区域显示在可视窗口时，显示楼层列表，否则隐藏

            if($(".con").offset().top-$scroll<clientH){

                $(".list").css("display","block");

            }else{

                $(".list").css("display","none");

            }

            $(".floor").each(function () {

                /*var clientH = window.screen.availHeight;*/

                var $height = $(this).height();

                var $off = $(this).offset().top;

                var $index = $(this).index();

                /*if ($off + $height - $scroll >$height  && $off + $height - $scroll <= clientH) {*/

                if ($off - $scroll < clientH/2) {

                    $(this).css("background","green");

                    $(this).siblings().css("background","red");

                    $(".list li").eq($index).addClass("active");

                    $(".list li").eq($index).siblings().removeClass("active");

                } else {

                    $(this).css("background", "red");

                    $(".list li").eq($index).removeClass("active");

                }

            })

        });

        $(".smooth").on("click", function () {

            var href = $(this).attr("href");

            var $step = $(href).offset().top;

            $("body").animate({"scrollTop": $step}, 500);

            return false;

        })

    })

</script>

</html>

效果说明：

1）当楼层内容没有显示在可视区域时，隐藏楼层列表，否则显示

2）当楼层内容距离屏幕顶端距离小于屏幕可视高度的一半时，给当前楼层设置为绿色背景

3）点击楼层列表时，跳转到对应的楼层内容

jq实现楼层切换效果的更多相关文章

  1. tab切换的效果——仿照今日头条APP的切换效果

    说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...

  2. weui 多网页切换效果分析

    weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...

  3. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

  4. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  5. jQuery手机端触摸卡片切换效果

    效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: <!doctype html> <htm ...

  6. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...

  7. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  8. 精致3D图片切换效果，最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

  9. Midnight.js – 实现奇妙的固定头部切换效果

    Midnight.js 是一款 jQuery 插件,在页面滚动的时候实现多个头设计之间的切换,所以你总是有一个头与它下面的内容层叠,看起来效果很不错. Midnight.js 可以让你轻松实现这种切换 ...

随机推荐

  1. ：判断101-200之间有多少个素数，并输出所有素数。 程序分析：判断素数的方法：用一个数分别去除2到sqrt(这个数)，如果能被整除， 则表明此数不是素数，反之是素数。

    package C; public class Sushu { public static void main(String[] args) { int sum=0; for (int i = 101 ...

  2. Action的搭建及application、request、Session的运用 多种方法

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. 序列化、反序列化（实体类或要序列化的对象类必须实现Serializable接口）

    package com.phone.shuyinghengxie; import java.io.Serializable; /* 一个类的对象要想序列化成功,必须满足两个条件: 该类必须实现 jav ...

  4. Spring AOP和AspectJ支持

    学了Spring之后发现我都不知道java为何物-- 在这一章中有好几节,讲的切面编程 第一节:在项目中启用Spring的AspectJ注解支持 第二节:用AspectJ注解声明aspect 第三节: ...

  5. 用Spring MVC开发简单的Web应用

    这个例子是来自于Gary Mak等人写的Spring攻略(第二版)第八章Spring @MVC中的一个例子,在此以学习为目的进行记录. 问题:想用Spring MVC开发一个简单的Web应用, 学习这 ...

  6. 关于Android 构建

    在简书上面有系列关于Android 的文章,还不错,部分同学可以在开发过程中阅读和学习:www.jianshu.com/collection/3fde3b545a35 关于Android 构建,看到这 ...

  7. iOS - PassData

    前言 页面传值: 复合传值 单例传值 userDefaults 传值 代理传值 Block/闭包传值 1.复合传值 复合 - 正向传值 1.接收方,头文件中创建可存放传递值的属性变量 2.发送方,包含 ...

  8. [转载] 如何使用Lex/YACC

    原文: http://segmentfault.com/a/1190000000396608?hmsr=toutiao.io&utm_medium=toutiao.io&utm_sou ...

  9. Oracle正则表达式函数：regexp_like、regexp_substr、regexp_instr、regexp_replace

    Oracle正则表达式函数:regexp_like.regexp_substr.regexp_instr.regexp_replace   --去掉所有特殊字符,只剩字母  SELECT REGEXP ...

  10. Java编程思想学习笔记_2(继承和多态)

    静态初始化: 静态初始化只在必要的时刻进行.(即当程序需要加载类进入内存的时候,执行静态初始化.静态变量和静态代码块的初始化顺序,按照在代码中声明的顺序老执行.例如:如果要执行某个public类,那么 ...