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