bootstrap侧边栏圆点导航

时间:2020-05-15 ClerverCC 人气:0

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

<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个精彩的专题：

加载全部内容