B站效果: 简单模仿:
html代码如下
<div class="side-nav" role="navigation">
<ul class="nav-side-nav">
<li><a href="#onepage" id="one-nav" class="tooltip-side-nav on"></a></li>
<li><a href="#twopage" id="two-nav" class="tooltip-side-nav"></a></li>
<li><a href="#threepage" id="three-nav" class="tooltip-side-nav"></a></li>
<li><a href="#fourpage" id="four-nav" class="tooltip-side-nav"></a></li>
<li><a href="#fivepage" id="five-nav" class="tooltip-side-nav"></a></li>
</ul>
</div>
在body部分需要加上滚动监听:
<body id="main" onscroll="myFunction()">
CSS
.side-nav{
position: fixed;
top:45%;
right:20px;
z-index: 1;
}
.side-nav ul.nav-side-nav{
text-align: center;
list-style: none;
margin: 0;
padding-left: 0;
}
.side-nav ul.nav-side-nav > li{
display: block;
line-height: 1.45em;
margin: 0;
padding: 8px 0;
}
.side-nav ul.nav-side-nav > li > a{
display: block;
width:10px;
height:10px;
border: 2px solid #fff;
background-color: transparent;
border-radius: 50%;
}
.side-nav ul.nav-side-nav > li > a.on{
background-color: #fff;
}
Js代码:
function myFunction(){
var currTop = $('#main').scrollTop();
var oneTop = $('#onepage').offset().top;
var twoTop = $('#twopage').offset().top;
var threeTop = $('#threepage').offset().top;
var fourTop = $('#fourpage').offset().top;
var fiveTop = $('#fivepage').offset().top;
//在第1屏
if(currTop < twoTop*0.8){
$('#one-nav').addClass('on');
$('#two-nav,#three-nav,#four-nav,#five-nav').removeClass('on');
}
//在第2屏
if(currTop >= twoTop*0.8){
$('#two-nav').addClass('on');
$('#one-nav,#three-nav,#four-nav,#five-nav').removeClass('on');
}
//在第3屏
if(currTop >= (threeTop - twoTop) * 0.8 + twoTop){
$('#three-nav').addClass('on');
$('#two-nav,#one-nav,#four-nav,#five-nav').removeClass('on');
}
//在第4屏
if(currTop >= (fourTop - threeTop) * 0.8 + threeTop){
$('#four-nav').addClass('on');
$('#two-nav,#three-nav,#one-nav,#five-nav').removeClass('on');
}
//在第5屏
if(currTop >= (fiveTop - fourTop) * 0.8 + fourTop){
$('#five-nav').addClass('on');
$('#two-nav,#three-nav,#four-nav,#one-nav').removeClass('on');
}
}