京東首頁滾動樓層標識
阿新 • • 發佈：2018-11-10
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Title</title> <!-- 本功能依賴jquery外掛,需要引入jquery.js 這裡的可以直接到網上搜線上引用地址--> <script src="public/bs/js/jquery-1.11.0.min.js"></script> <style> .active{ background: #fff0f8 !important; } </style> </head> <body> <div style="float:left;width:10%;position: fixed;" id="nav"> <p style="color:red">第一層樓</p> <p>第二層樓</p> <p>第三層樓</p> <p>第四層樓</p> <p>第五層樓</p> <p>第六層樓</p> </div> <div style="float:left;margin-left:10%;"> <!--只要定義為divs類名 都可以使用--> <div style="width:100px;background:#9100ff;" class="divs active"> <h1>第一層</h1> <h1>第一層</h1> <h1>第一層</h1> <h1>第一層</h1> <h1>第一層</h1> <h1>第一層</h1> <h1>第一層</h1> <h1>第一層</h1> <h1>第一層</h1> </div> <div style="width:100px;background:#feff2b;" class="divs"> <h1>第二層</h1> <h1>第二層</h1> <h1>第二層</h1> <h1>第二層</h1> <h1>第二層</h1> <h1>第二層</h1> <h1>第二層</h1> <h1>第二層</h1> <h1>第二層</h1> </div> <div style="width:100px;background:#4145ff;" class="divs"> <h1>第三層</h1> <h1>第三層</h1> <h1>第三層</h1> <h1>第三層</h1> <h1>第三層</h1> <h1>第三層</h1> <h1>第三層</h1> <h1>第三層</h1> </div> <div style="width:100px;background:#69ff58;" class="divs"> <h1>第四層</h1> <h1>第四層</h1> <h1>第四層</h1> <h1>第四層</h1> <h1>第四層</h1> <h1>第四層</h1> <h1>第四層</h1> <h1>第四層</h1> </div> <div style="width:100px;background:#ff7361;" class="divs"> <h1>第五層</h1> <h1>第五層</h1> <h1>第五層</h1> <h1>第五層</h1> <h1>第五層</h1> <h1>第五層</h1> <h1>第五層</h1> <h1>第五層</h1> </div> <div style="width:100px;background:#f835ff;" class="divs"> <h1>第六層</h1> <h1>第六層</h1> <h1>第六層</h1> <h1>第六層</h1> <h1>第六層</h1> <h1>第六層</h1> <h1>第六層</h1> <h1>第六層</h1> </div> <div style="height: 1000px;"> </div> </div> </body> <script> // 滾動查詢指定類滾動到指定高度所要執行的事件 $(document).scroll(function(){ // 1.先獲取到元素類的個數 var classLength = $(".divs").length; // 2.做for迴圈,迴圈次數為元素的個數 for(var i = 0;i<classLength ;i++){ // 3.獲取到每一個元素減去滾動條到頂部的高度,如果大於0 則表示 元素已經到達頂部 // console.log("滾動條距離頂部高度 : "+ $(window).scrollTop()); // console.log("元素距離頂部高度 "+i+ ": "+$(".divs").eq(i).offset().top); // console.log("滾動條 減去 元素 : "+ ($(window).scrollTop()-$(".divs").eq(i).offset().top)); // 就可以得到元素是否到達頂部 var myScrollTop = $(window).scrollTop(); var myElementTop = $(".divs").eq(i).offset().top; var myElementHeight = $(".divs").eq(i).height(); // 1 .當元素的頂部 到達 瀏覽器視窗頂部 2 .當元素底部在視窗範圍內(滾動條減去元素距頂部高度小於元素本身高度) // 如果想讓偏移量往上一點,可以修改數字值, if(myScrollTop - myElementTop> -120 && myScrollTop - myElementTop < myElementHeight -100 ){ $(".divs").eq(i).addClass("active"); $("#nav p").eq(i).css({"color":"red"}); }else{ // 當元素底部在視窗範圍外 $(".divs").eq(i).removeClass("active"); $("#nav p").eq(i).css({"color":"black"}); } } // 剛開始想出來的笨辦法 ↑ 改進後 /*if(($(window).scrollTop())-($("#div1").offset().top) > 0){ $("#div1").css({"background":"green"}); $("#nav p").eq(0).css({"color":"green"}); }else{ $("#div1").css({"background":"red"}); $("#nav p").eq(0).css({"color":"black"}); } if(($(window).scrollTop())-($("#div2").offset().top) > 0){ $("#div2").css({"background":"green"}); $("#nav p").eq(1).css({"color":"green"}); }else{ $("#div2").css({"background":"yellow"}); $("#nav p").eq(1).css({"color":"black"}); } if(($(window).scrollTop())-($("#div3").offset().top) > 0){ $("#div3").css({"background":"green"}); $("#nav p").eq(2).css({"color":"green"}); }else{ $("#div3").css({"background":"blue"}); $("#nav p").eq(2).css({"color":"black"}); }*/ }) </script> </html>
最終效果
