bootstrap侧边栏圆点导航

原创 2017-01-14 10:48:50 1818
摘要:如图,随页面向下滑动,到指定页面后圆点变成白色,也可以通过点击圆点跳转到某个位置。<div class="onepage" id="onepage"></div> <div class="twopage" id="twopage"></d

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


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

  更多关于bootstrap侧边栏圆点导航请关注PHP中文网(www.php.cn)其他文章!   


发布手记

热门词条