<!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. 为什么需要main函数,及其参数的用法

    首先,需要明确main函数是什么? 答:main函数是C语言约定的入口函数 C99标准里面是这样描述的: Program startup The function called at program ...

  2. HTML DOM事件

    HTML DOM事件 1.HTML事件包括: (1)当用户点击鼠标时: (2)当页面已加载时: (3)当图像已加载时: (4)当鼠标移动到元素上时: (5)当输入字段被改变时: (6)当提交HTML表 ...

  3. ios获取摄像头与相册图片

    iOS的一些设备上都安装了摄像头.现在绝大多数都有了. 在编程中,我们是用相应的东西来进行照相,录像等功能.   一.UIImagePickerController类 UIImagePickerCon ...

  4. 【转载】20分钟MySQL基础入门

    原文:20分钟MySQL基础入门 这里持续更新修正 开始使用 MySQL 为关系型数据库(Relational Database Management System),一个关系型数据库由一个或数个表格 ...

  5. Using Post-Form Trigger In Oracle Forms

    Post-Form trigger in Oracle Forms fires during the Leave the Form process, when a form is exited.   ...

  6. Know How And When To Use System.Message_Level To Control Messages In Oracle Forms

    SYSTEM.MESSAGE_LEVEL is used to control the messages that end users see when they use the Oracle For ...

  7. Fully differential amplifiers

    Introduction       专业音频工程师通常使用术语“平衡”来指代差分信号传输.这也告知了我们对称的概念,同时它在差分系统中也是非常重要的.在差分系统中,驱动器有平衡的输出,传输线有平衡的 ...

  8. Java编程思想读书笔记

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. centos vpn

    yum install ppp -y cd /usr/local/src wget http://dl.fedoraproject.org/pub/epel/7/x86_64/p/pptpd-1.4. ...

  10. 用Jenkins+Gradle+Jetty实现持续集成、测试、部署

    自动集成有很多种方案,本例用到的工具是Jenkins(前身Hudson)+Gradle+Jetty,关于Gradle可参考上一篇,Gradle常见问题. 本例项目名称: WAP Jetty 安装Jen ...