                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /網(wǎng)頁定位導(dǎo)航特效

大家?guī)兔聪履睦锍鰡栴}了？

<!DOCTYPE html><html lang="en"><head>??? <meta charset="UTF-8">??? <title>My-Store商城</title>??? ??? <script src="jquery.js"></script>??? ??? <style>??? *{padding:0; margin:0;list-style: none}body{??? font-size: 15px;??? line-height:15px;}#content{??? border:1px solid #8ddbf3;??? padding:20px;??? width: 800px;???? margin: 0 auto;}h1{??? color: #0088BB;font-weight: blod;??? font-size: 30px;}.item{??? margin:20px 10px 20px 10px;??? border:1px solid #c0c0c0;}.item li{??? display:inline;margin-right: 10px;}.item h3{??? border-bottom:2px solid #0088BB;???? font-size: 28px;font-weight: bold;??? margin:10px 5px 10px 8px;??? padding-bottom: 10px;}.item ul li img{??? width:230px;height: 230px;??? margin-right:10px;margin-bottom: 10px;}#floor {??? position: fixed;????????? /*?? 固定定位?? */??? top: 100px;??? left: 50%;???????????? /*小技巧：先定位到中部，再向右偏移*/??? margin-left:422px;??? width: 50px;}#floor ul li a{????????? /*樣式寫在a標(biāo)簽上不寫在li標(biāo)簽上*/display:block;border:1px solid #eee;height:30px;line-height: 30px;width:80px;color:black;text-align: center;font-weight: bold;margin-bottom: 5px;text-decoration: none; }#floor ul li a:hover,#floor ul li .current{??? color: #fff;??? background: #0088bb;}??? </style>??? <script>??? $(document).ready(function () {??? $(window).scroll(function () {??????? var top = $(document).scrollTop();??????? // console.log(top);??????? var floor = $("#floor");??????? var items = $("#content").find(".item");??????? var currentId = "";??????? items.each(function () {??????????? //jq中的offset方法：返回或設(shè)置元素相對于文檔的位置??????????? var itemTop = $(this).offset().top;??????????? // console.log(itemTop);??????????? if (top > itemTop-220) {??????????????? currentId = "#" + $(this).attr("id");??????????? } else {??????????????? return false;??????????? }??????? });??????? var classCurrent = floor.find(".current");??????? if (currentId && classCurrent.attr("href") != currentId) {??????????? classCurrent.removeClass("current");??????????? floor.find("[href=" + currentId + "]").addClass("current");??????? }??? });});??? </script></head><body>??? <div id="floor">??????? <ul>??????????? <li>??????????????? <a href="#item1" class="current">F1? 男裝</a>?????? ??????????? </li>??????????? <li>??????????????? <a href="#item2">F2? 女裝</a>??????????? </li>??????????? <li>??????????????? <a href="#item3">F3? 母嬰</a>??????????? </li>??????? </ul>??? </div>????????? <div id="content" >???????? <h1>My-Store商城</h1>??????? <div id="item1" class="item">??????????? <h3>1F? 男裝</h3>??????????? <ul>??????????????? <li>??????????????????? <img src="imgs/1F.jpg" alt="">??????????????? </li>??????????????? <li>??????????????????? <img src="imgs/1F.jpg" alt="">??????????????? </li>??????????????? <li>??????????????????? <img src="imgs/1F.jpg" alt="">??????????????? </li>??????????????? <li>??????????????????? <img src="imgs/1F.jpg" alt="">??????????????? </li>??????????????? <li>??????????????????? <img src="imgs/1F.jpg" alt="">??????????????? </li>??????????????? <li>??????????????????? <img src="imgs/1F.jpg" alt="">??????????????? </li>??????????? </ul>??????? </div>??????? <div id="item2" class="item">??????????? <h3>2F?? 女裝</h3>??????????? <ul>??????????????? <li>??????????????????? <img src="imgs/2F.jpg" alt="">??????????????? </li>??????????????? <li>??????????????????? <img src="imgs/2F.jpg" alt="">??????????????? </li>??????????????? <li>??????????????????? <img src="imgs/2F.jpg" alt="">??????????????? </li>??????????????? <li>??????????????????? <img src="imgs/2F.jpg" alt="">??????????????? </li>??????????????? <li>??????????????????? <img src="imgs/2F.jpg" alt="">??????????????? </li>??????????????? <li>??????????????????? <img src="imgs/2F.jpg" alt="">??????????????? </li>??????????? </ul>??????? </div>??????? <div id="item3" class="item">??????????? <h3>3F?? 母嬰</h3>??????????? <ul>??????????????? <li>??????????????????? <img src="imgs/3F.jpg" alt="">??????????????? </li>??????????????? <li>??????????????????? <img src="imgs/3F.jpg" alt="">??????????????? </li>??????????????? <li>??????????????????? <img src="imgs/3F.jpg" alt="">??????????????? </li>??????????????? <li>??????????????????? <img src="imgs/3F.jpg" alt="">??????????????? </li>??????????????? <li>??????????????????? <img src="imgs/3F.jpg" alt="">??????????????? </li>??????????????? <li>??????????????????? <img src="imgs/3F.jpg" alt="">??????????????? </li>??????????? </ul>??????? </div>??? </div></body></html>