.单纯的侧边栏导航使用CSS的position:fixed属性即可实现，但要是实现如下图
代码如下
<!DOCTYPE html>
<html>
<head>
<title>楼层监听</title>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
a{text-decoration: none;color: #999;}
li{list-style-type: none;}
/*楼层样式*/
.header{
height: 700px;
width: 100%;
}
.floor{
width: 70%;
margin: 0 auto;
}
.floor-item1{height: 600px;background-color: #D1EEEE;}
.floor-item2{height: 700px;background-color: #EE1289;}
.floor-item3{height: 600px;background-color: #B3EE3A;}
.floor-item4{height: 400px;background-color: #66CDAA;}
.floor-item5{height: 500px;background-color: #F08080;}
.floor-item6{height: 200px;background-color: #F0F8FF;}
.floor-item7{height: 800px;background-color: #FF7F24;}
.floor-item8{height: 600px;background-color: #FFD700;}
/*/楼层样式*/
/*左侧楼层导航栏*/
.leftsidebar{
width: 50px;
height: 250px;
position: fixed;
top: 0;
bottom: 0;
left: 70px;
margin: auto 0;
display: none;
}
.leftsidebar>li{
width: 50px;
height: 50px;
box-sizing: border-box;
border-bottom: 1px solid #CCC;
position: relative;
}
.leftsidebar>li:nth-child(1){
border-top: 1px solid #CCC;
}
.leftsidebar>li>a{
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*控制楼层名称的显示和隐藏*/
.leftsidebar>li>a.active{
color: red;
}
.leftsidebar>li>a.active .no{
display: none;
}
.leftsidebar>li>a:hover .no{
display: none;
}
.leftsidebar>li>a .floor-name{
display: none;
font-size: 10px;
}
.leftsidebar>li>a.active .floor-name{
display: block;
}
.leftsidebar>li>a:hover .floor-name{
display: block;
}
/*/控制楼层名称的显示和隐藏*/
/*/左侧楼层导航栏*/
</style>
</head>
<div class="header">
<h1>这块区域楼层隐藏</h1>
</div>
<!-- 楼层结构 -->
<div class="main">
<div class="floor floor-item1" id="floor1">
<h1>1F 服装</h1>
</div>
<div class="floor floor-item2" id="floor2">
<h1>2F 电器</h1>
</div>
<div class="floor floor-item3" id="floor3">
<h1>3F 食品</h1>
</div>
<div class="floor floor-item4" id="floor4">
<h1>4F 网吧</h1>
</div>
<div class="floor floor-item5" id="floor5">
<h1>5F 熟食</h1>
</div>
<div class="floor floor-item6" id="floor6">
<h1>6F 电影院</h1>
</div>
<div class="floor floor-item7" id="floor7">
<h1>7F 餐厅</h1>
</div>
<div class="floor floor-item8" id="floor8">
<h1>8F 测试</h1>
</div>
</div>
<!-- 楼层结构 -->
<!-- 左侧楼层导航栏 -->
<!-- 跳转到指定的楼层是使用a标签的锚点 -->
<ul class="leftsidebar">
<li>
<a href="#floor1">
<span class="no">1F</span>
<span class="floor-name">服装</span>
</a>
</li>
<li>
<a href="#floor2">
<span class="no">2F</span>
<span class="floor-name">电器</span>
</a>
</li>
<li>
<a href="#floor3">
<span class="no">3F</span>
<span class="floor-name">食品</span>
</a>
</li>
<li>
<a href="#floor4">
<span class="no">4F</span>
<span class="floor-name">网吧</span>
</a>
</li>
<li>
<a href="#floor5">
<span class="no">5F</span>
<span class="floor-name">熟食</span>
</a>
</li>
<li>
<a href="#floor6">
<span class="no">6F</span>
<span class="floor-name">电影院</span>
</a>
</li>
<li>
<a href="#floor7">
<span class="no">7F</span>
<span class="floor-name">餐厅</span>
</a>
</li>
<li>
<a href="#floor8">
<span class="no">8F</span>
<span class="floor-name">测试</span>
</a>
</li>
</ul>
<!-- /左侧楼层导航栏 -->
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
setFloorScroll();
function setFloorScroll(){
var floors = $('.main>.floor'); //楼层
var floorsNav = $('.leftsidebar'); //楼层导航栏
var floorsLi = floorsNav.find('li'); //楼层号
var floorsHeightArr = floors.map(function(){ //每层的高度（数组）
return $(this).offset().top-200; //减小每一层触发的高度
}).get();
$(window).scroll(function(){
var nowHeight = $(this).scrollTop(); //当前高度
var nowFloor = $.grep(floorsHeightArr,function(n,i){ //当前楼层号
return n > nowHeight;
},true).length;
showFloorsNav(floorsHeightArr[0],nowHeight,floorsNav);
setNowFloor(floorsLi,nowFloor-1);
});
}
/*显示和隐藏楼层号*/
function showFloorsNav(firstFloorHeight,nowHeight,floorsNav){
if(nowHeight>firstFloorHeight){
floorsNav.css({display:'block'});
}else{
floorsNav.css({display:'none'});
}
}
/*设置当前所在楼层的样式*/
function setNowFloor(floorsLi,index){
if(index<0){
return false;
}else{
floorsLi.find('a').removeClass('active').eq(index).addClass('active'); //楼层名称的显示用css控制
}
}
});
</script>
</body>
</html>