bootstrap侧边栏圆点导航

2019-11-19 18:01:22

字体：大中小

来源：转载

供稿：网友

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

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

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

上一篇：javascript基础知识讲解

下一篇：微信小程序开发（二）图片上传+服务端接收详解