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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
javascript 面向对象 function类
May 13 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 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获取linux服务器状态的代码
2014/05/27 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
php获取excel文件数据
2017/04/21 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
js 解决“options为空或不是对象”
2008/12/22 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
简单了解vue.js数组的常用操作
2019/06/17 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
Python读写zip压缩文件的方法
2018/08/29 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
python实现银行账户系统
2021/02/22 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
房产委托公证书
2014/04/08 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
董事长助理岗位职责
2015/02/11 职场文书
违纪开除通知书
2015/04/25 职场文书
通知书大全
2015/04/27 职场文书
正规欠条模板
2015/07/03 职场文书