<!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）点击楼层列表时，跳转到对应的楼层内容