摘要：如圖，隨頁面向下滑動，到指定頁面后圓點變成白色，也可以通過點擊圓點跳轉(zhuǎn)到某個位置。<div class="onepage" id="onepage"></div> <div class="twopage" id="twopage"></d

如圖，隨頁面向下滑動，到指定頁面后圓點變成白色，也可以通過點擊圓點跳轉(zhuǎn)到某個位置。

<div class="onepage" id="onepage"></div>
<div class="twopage" id="twopage"></div>
<div class="threepage" id="threepage"></div>
<div class="fourpage" id="fourpage"></div>

這是四個部分。

<div class="side-nav">
 <ul class="nav-side-nav">
  <li><a href="#onepage" class="tooltip-side-nav SELECT one"></a></li>
  <li><a href="#twopage" class="tooltip-side-nav default two"></a></li>
  <li><a href="#threepage" class="tooltip-side-nav default three"></a></li>
  <li><a href="#fourpage" class="tooltip-side-nav default four"></a></li>
  <li><a href="#fivepage" class="tooltip-side-nav default five"></a></li>
 </ul>
</div>

這是導航，

.side-nav{
 position: fixed;
 top: 45%;
 right: 20px;
 z-index: 1;
}
.side-nav ul{
 text-align: center;
 list-style: none;
 margin: 0;
 padding-left: 0;
}
.side-nav ul li{
 display: block;
 line-height: 1.45em;
 margin: 0;
 padding: 8px 0;
}
.side-nav ul li a{
 display: block;
 width: 10px;
 height: 10px;
 border-radius: 50%;
}
.default{
 background-color: #85939b;
  
}
.SELECT{
 background-color: white;
}

這是導航的樣式，使其浮動在頁面右側。
在這種情況下，已經(jīng)可以點擊圓點跳轉(zhuǎn)到某個頁面，只是圓點的顏色還沒有設定好。

SELECT和default決定小圓點的顏色。

$(".tooltip-side-nav").click(function(){  
 $(this).addClass("SELECT").parent().siblings().children().removeClass("SELECT");
 console.log($(".tooltip-side-nav"));
 $(this).removeClass("default").parent().siblings().children().addClass("default"); 
 })

當點擊圓點時，該圓點添加類.SELECT，移除類.default；就是說移除灰色，添加白色。
并且在這時，讓他的父節(jié)點也就是<li>標簽的兄弟節(jié)點的子節(jié)點（其他的圓點）移除白色，添加灰色。

$(function(){
 var two = $(".twopage").offset().top;
 var three = $(".threepage").offset().top;
 var four = $(".fourpage").offset().top;
 var five = $(".fivepage").offset().top;
  
  
 $(window).scroll(function() {
  var this_scrollTop = $(this).scrollTop();
  if(this_scrollTop>two&& this_scrollTop<three){
  $(".two").addClass("SELECT").parent().siblings().children().removeClass("SELECT");
    
  $(".two").removeClass("default").parent().siblings().children().addClass("default");
  }else if(this_scrollTop>three&& this_scrollTop<four){
  $(".three").addClass("SELECT").parent().siblings().children().removeClass("SELECT");
    
  $(".three").removeClass("default").parent().siblings().children().addClass("default");
  }else if(this_scrollTop>four&& this_scrollTop<five){
  $(".four").addClass("SELECT").parent().siblings().children().removeClass("SELECT");
    
  $(".four").removeClass("default").parent().siblings().children().addClass("default");
  }else if(this_scrollTop>five){
  $(".five").addClass("SELECT").parent().siblings().children().removeClass("SELECT");
   
  $(".five").removeClass("default").parent().siblings().children().addClass("default");
  }
 });
 });

這是屏幕滑動時的小圓點樣式的代碼。

示例

$(function(){
 var two = $(".twopage").offset().top;
 $(window).scroll(function() {
  var this_scrollTop = $(this).scrollTop();
  if(this_scrollTop>two&& this_scrollTop<three){
  $(".two").addClass("SELECT").parent().siblings().children().removeClass("SELECT");
  $(".two").removeClass("default").parent().siblings().children().addClass("default");
  }
});

  更多關于bootstrap側邊欄圓點導航請關注PHP中文網(wǎng)（ipnx.cn）其他文章！