如圖，隨頁面向下滑動，到指定頁面后圓點變成白色，也可以通過點擊圓點跳轉到某個位置。
<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個精彩的專題：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
