bootstrap侧边栏圆点导航


Posted in Javascript onJanuary 11, 2017

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

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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
微信小程序自定义单项选择器样式
Jul 25 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 #Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 #Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 #Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 #Javascript
vue2滚动条加载更多数据实现代码
Jan 10 #Javascript
简单实现IONIC购物车功能
Jan 10 #Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 #Javascript
You might like
php设计模式之命令模式的应用详解
2013/05/21 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
PHP实现文件上传与下载
2020/08/28 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Windows下python2.7.8安装图文教程
2016/05/26 Python
python——全排列数的生成方式
2020/02/26 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
中科前程Java笔试题
2016/11/20 面试题
测绘工程专业个人自我评价
2013/12/01 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
医院志愿者活动总结
2015/05/06 职场文书
关于做家务的心得体会
2016/01/23 职场文书
Golang二维数组的使用方式
2021/05/28 Golang