bootstrap侧边栏圆点导航

如图，随页面向下滑动，到指定页面后圆点变成白色，也可以通过点击圆点跳转到某个位置。

[html]  view plain  copy

1. <div class="onepage" id="onepage"></div>  
2. <div class="twopage" id="twopage"></div>  
3. <div class="threepage" id="threepage"></div>  
4. <div class="fourpage" id="fourpage"></div>  

这是四个部分。

[html]  view plain  copy

1. <div class="side-nav">  
2.         <ul class="nav-side-nav">  
3.             <li><a href="#onepage" class="tooltip-side-nav select one"></a></li>  
4.             <li><a href="#twopage" class="tooltip-side-nav default two"></a></li>  
5.             <li><a href="#threepage" class="tooltip-side-nav default three"></a></li>  
6.             <li><a href="#fourpage" class="tooltip-side-nav default four"></a></li>  
7.             <li><a href="#fivepage" class="tooltip-side-nav default five"></a></li>  
8.         </ul>  
9. </div>  

这是导航，

[css]  view plain  copy

1. .side-nav{  
2.     position: fixed;  
3.     top: 45%;  
4.     right: 20px;  
5.     z-index: 1;  
6. }  
7. .side-nav ul{  
8.     text-align: center;  
9.     list-style: none;  
10.     margin: 0;  
11.     padding-left: 0;  
12. }  
13. .side-nav ul li{  
14.     display: block;  
15.     line-height: 1.45em;  
16.     margin: 0;  
17.     padding: 8px 0;  
18. }  
19. .side-nav ul li a{  
20.     display: block;  
21.     width: 10px;  
22.     height: 10px;  
23.     border-radius: 50%;  
24. }  
25. .default{  
26.     background-color: #85939b;  
27.   
28. }  
29. .select{  
30.     background-color: white;  
31. }  

这是导航的样式，使其浮动在页面右侧。

在这种情况下，已经可以点击圆点跳转到某个页面，只是圆点的颜色还没有设定好。

select和default决定小圆点的颜色。

[javascript]  view plain  copy

1. $(".tooltip-side-nav").click(function(){  
2.   
3.        $(this).addClass("select").parent().siblings().children().removeClass("select");  
4.        console.log($(".tooltip-side-nav"));  
5.        $(this).removeClass("default").parent().siblings().children().addClass("default");  
6.   
7.    })  

当点击圆点时，该圆点添加类.select，移除类.default；就是说移除灰色，添加白色。

并且在这时，让他的父节点也就是<li>标签的兄弟节点的子节点（其他的圆点）移除白色，添加灰色。

[javascript]  view plain  copy

1. $(function(){  
2.         var two = $(".twopage").offset().top;  
3.         var three = $(".threepage").offset().top;  
4.         var four = $(".fourpage").offset().top;  
5.         var five = $(".fivepage").offset().top;  
6.   
7.   
8.         $(window).scroll(function() {  
9.             var this_scrollTop = $(this).scrollTop();  
10.             if(this_scrollTop>two&& this_scrollTop<three){  
11.                 $(".two").addClass("select").parent().siblings().children().removeClass("select");  
12.                   
13.                 $(".two").removeClass("default").parent().siblings().children().addClass("default");  
14.             }else if(this_scrollTop>three&& this_scrollTop<four){  
15.                 $(".three").addClass("select").parent().siblings().children().removeClass("select");  
16.                  
17.                 $(".three").removeClass("default").parent().siblings().children().addClass("default");  
18.             }else if(this_scrollTop>four&& this_scrollTop<five){  
19.                 $(".four").addClass("select").parent().siblings().children().removeClass("select");  
20.                  
21.                 $(".four").removeClass("default").parent().siblings().children().addClass("default");  
22.             }else if(this_scrollTop>five){  
23.                 $(".five").addClass("select").parent().siblings().children().removeClass("select");  
24.             
25.                 $(".five").removeClass("default").parent().siblings().children().addClass("default");  
26.             }  
27.         });  
28.     });  

这是屏幕滑动时的小圆点样式的代码。

示例

[javascript]  view plain  copy

1.  $(function(){  
2.         var two = $(".twopage").offset().top;  
3.  $(window).scroll(function() {  
4.             var this_scrollTop = $(this).scrollTop();  
5.             if(this_scrollTop>two&& this_scrollTop<three){  
6.                 $(".two").addClass("select").parent().siblings().children().removeClass("select");    
7.                 $(".two").removeClass("default").parent().siblings().children().addClass("default");  
8.             }  
9. });