如图，随页面向下滑动，到指定页面后圆点变成白色，也可以通过点击圆点跳转到某个位置。
成都创新互联公司专注于企业网络营销推广、网站重做改版、宁陵网站定制设计、自适应品牌网站建设、成都h5网站建设、电子商务商城网站建设、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为宁陵等各大城市提供网站开发制作服务。
这是四个部分。
这是导航，
.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；就是说移除灰色，添加白色。
并且在这时，让他的父节点也就是
标签的兄弟节点的子节点（其他的圆点）移除白色，添加灰色。$(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_scrollTopthree&& this_scrollTopfour&& this_scrollTopfive){
$(".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如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap Table使用教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
网站名称：bootstrap侧边栏圆点导航
地址分享：http://cdkjz.cn/article/jopich.html
