bootstrap侧边栏圆点导航

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

<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;
}

这是导航的样式，使其浮动在页面右侧。
在这种情况下，已经可以点击圆点跳转到某个页面，只是圆点的颜色还没有设定好。

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

$(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");
  }
}); 

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。