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