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 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
Node.js使用Angular简单示例
May 11 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
详解关于element级联选择器数据回显问题
Feb 20 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脚本加密专家php解密算法
2020/09/13 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
php中{}大括号是什么意思
2013/12/01 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP写日志的实现方法
2014/11/05 PHP
php文件读取方法实例分析
2015/06/20 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
js表单登陆验证示例
2016/10/19 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
微信小程序框架的页面布局代码
2019/08/17 Javascript
python操作excel文件并输出txt文件的实例
2018/07/10 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
python global关键字的用法详解
2019/09/05 Python
Python多线程thread及模块使用实例
2020/04/28 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
大学生党课思想汇报
2013/12/29 职场文书
白酒市场开发计划书
2014/01/09 职场文书
女方回门宴答谢词
2014/01/14 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
云冈石窟导游词
2015/02/04 职场文书
第一书记观后感
2015/06/08 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书