sideBar 楼层跳跃导航栏

body部分

<div class="sideBar">
	<div class="sideBar-list">
		<div class="sideBar-item">直播</div>
		<div class="sideBar-item">动画</div>
		<div class="sideBar-item">番剧</div>
		<div class="sideBar-item">音乐</div>
		<div class="sideBar-item">舞蹈</div>
		<div class="sideBar-item">国创</div>
	</div>
	<div class="sideBar-line"></div>
	<div class="sideBar-goUp"></div>
</div>

Jquery部分

$(function (){
	$(".sideBar-item").click(function (){
		$(this).addClass("current").siblings().removeClass("current");
		var index = $(this).index();
		console.log(index);
		var offset = $(".headLine").eq(index).offset().top;
		$("html,body").animate({scrollTop: offset},1000);
	});
	$(window).scroll(function (){
		var $winOffset = $(window).scrollTop();
		var $winHeight = $(window).height();
		$(".headLine").each(function (index,ele){
			var floorOffset = $(ele).offset().top;
			var floorHeight = $(ele).height();
			if($winOffset-floorOffset >= floorHeight/2){
				$(".sideBar-item").eq(index).addClass("current").siblings().removeClass("current");
			}
		});
		var height = $('.headLine').eq(0).offset().top;
		if(height>$winOffset){
			$(".sideBar").css("top","50%");
		}else {
			$(".sideBar").css("top","10%");
		}
	});
	$('.sideBar-goUp').click(function(){
		$("html,body").animate({scrollTop: 0},1000);
	})
})

CSS部分

/*sideBar*/
.sideBar {
	position: fixed;
	right: 5%;
	top: 50%;
	width: 50px;
	height: 100%;
	transition: all 0.3s;
	text-align: center;
}
.sideBar-list {
    position: relative;
    width: 48px;
    background-color: #f6f9fa;
    border: 1px solid #e5e9ef;
    border-radius: 4px;
}
.sideBar-item {
	position: relative;
	display: inline-block;
    width: 48px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    transition: background-color .3s,color .3s;
    cursor: pointer;
}
.sideBar-item:hover {
	background-color:#00a1d6;
	color: #fff;
}
.current{
	background-color:#00a1d6;
	color: #fff;
}
.sideBar-line {
    height: 9px;
    width: 30px;
    margin: 0 auto;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}
.sideBar-goUp {
    height: 48px;
    background: url(../images/icons.png) -648px -72px no-repeat;
    background-color: #f6f9fa;
    border: 1px solid #e5e9ef;
    border-radius: 4px;
    cursor: pointer;
}
.sideBar-goUp:hover {
	background-color:#00a1d6;
	background-position: -714px -72px;
}