B站效果：简单模仿： html代码如下 <div class="side-nav" role="navigation"> <ul class="nav-side-nav">
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'); } }
