bootstrap侧边栏圆点导航
更新时间：2017年01月11日 08:32:56 作者：ClerverCC
这篇文章主要为大家详细介绍了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");
}
});
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了JavaScript表单验证的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
用js获取本地电脑信息（但是只能在IE浏览器下才行，其他浏览器其获取不到的）2013-01-01
这篇文章主要介绍了ES6 新增的创建数组的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了JS常用的几种数组遍历方式以及性能分析对比,结合实例形式详细分析了javascript针对数组遍历的几种常见使用方法及执行效率对比,具有一定参考借鉴价值,需要的朋友可以参考下2018-04-04
这篇文章介绍了异步动态加载js与css文件的几种方法，有需要的朋友可以参考一下2013-09-09
这篇文章主要介绍了JavaScript实现简单精致的图片左右无缝滚动效果,涉及javascript结合时间函数动态操作页面元素属性的相关技巧,需要的朋友可以参考下2017-03-03
需求为当用户鼠标经过好友列表中好友头像时，显示该好友的基本资料，其实也就是类似QQ客户端的那种功能，下面是具体的实现思路及过程2014-07-07
排序有内部排序和外部排序，内部排序是数据记录在内存中进行排序，而外部排序是因排序的数据很大，一次不能容纳全部的排序记录，在排序过程中需要访问外存。我们这里说说八大排序就是内部排序。2015-04-04
本篇文章主要介绍了js清除input中type等于file的值域(示例代码) 需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要给大家介绍了关于微信小程序授权登录的优雅处理方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
最新评论