您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
如图,随页面向下滑动,到指定页面后圆点变成白色,也可以通过点击圆点跳转到某个位置。
<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插件使用教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。