未加星标

bootstrap侧边栏圆点导航

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏
如图,随页面向下滑动,到指定页面后圆点变成白色,也可以通过点击圆点跳转到某个位置。
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个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: Bootstrap
分页:12
转载请注明
本文标题:bootstrap侧边栏圆点导航
本站链接:http://www.codesec.net/view/523801.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(37)