结合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");}
});

结合bootstrap编写右侧点状导航样式相关推荐

Bootstrap系列 -- 37. 基础导航样式
Bootstrap框架中制作导航条主要通过".nav"样式.默认的".nav"样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如"nav-t ...
bootstrap 导航菜单折叠位置_教大家如何编写一个网页导航条
导航条简单地说就是对你整个网站模块的简单介绍,你可以直接点击导航条某一个按钮或板块便可进入其相应的界面,如:网页.新闻.贴吧等 .在企业网站上,导航条上常见的有:产品介绍,公司简介,最新产品,联系我们 ...
BootStrap一页通（样式+组件+插件）（全）
初识 bootstrap是一种前端框架,实现美观的页面效果. 使用BootStrap的前期工作(注意顺序): <!DOCTYPT html>:因为Bootstrap用到了h5的特性,所以需 ...
如何使用Bootstrap构建画布外导航布局
Bootstrap旨在通过提供一些常用的Web组件来满足许多情况. 有按钮,响应式导航栏,选项卡,工具提示,轮播等. 尽管如此,即使Bootstrap提供了所有玩具,它仍然缺少一种非常流行的模式:离画 ...
电商项目实战第五节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【商品栏及右侧垂直导航】
上一节:电商项目实战第四节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[轮播图特效] 文章目录 [考拉海购网站]之[商品栏及右侧垂直导航] 第一步,页面布局分布情况分析第二步,根据页面 ...
Bootstrap组件学习之导航和导航条
导航 Bootstrap提供灵活.多样的导航组件,允许使用相同的标签.不同的类,实现不同风格的导航样式,具有非常高的可定制行.所有的导航组件,包括标签页.pills.导航列表标签,都必须使用nav类实 ...
vue商城项目开发：底部导航样式、顶部导航矩阵和轮播图
底部导航样式修改第一步: 第二步: 顶部导航矩阵 v-for取代多次复制字体图标动态传入动态绑定样式添加8个 {{}}和{}的区别 {{}}: 不带任何符号: {}: 首页轮播图准备图片数组 ...
bootstrap悬停下拉导航的实现
为了减轻用户操作行为,提升用户体验,往往会将点击下拉导航改为悬停下拉的效果. 本文就讲述一下,bootstrap悬停下拉导航的实现先不说那么详细,围观先: 1. css代码设置如下: /*悬停下拉导 ...
【Android 仿微信通讯录导航分组列表-下】自定义View为RecyclerView打造右侧索引导航栏IndexBar
本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布转载请标明出处: http://blog.csdn.net/zxt0601/article/details/52420706 本文出 ...

结合bootstrap编写右侧点状导航样式

结合bootstrap编写右侧点状导航样式相关推荐

最新文章

热门文章