溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
我們在日常瀏覽網站中，由于網站包含信息量大，例如購物網站中會有許多商品。那么對于這樣的情況，往往會有導航欄來幫助我們迅速的找到自己想要的信息。例如圖中所示，左側是商品列表，右側是商品分類導航欄。
我們現在需要做到的效果是：
1、點擊某個商品分類，自動跳轉至具體的商品列表。
2、在鼠標滾動瀏覽商品的同時，根據左側的商品信息的變化情況，右側的分類名稱會自動標紅。表示現在瀏覽的商品正是該分類下的商品。
實現的基本思路：
1、設置錨點。在導航欄的<a>標簽中，設置"href"屬性為各個展示商品信息的<div>標簽的"id"屬性。
2、自動刪除/添加樣式。當鼠標瀏覽到某一分類時，自動給右側導航欄中該分類名稱添加一個“當前樣式”；當鼠標繼續瀏覽，離開該分類時，自動刪除該分類的“當前樣式”，并同理給下一個分類添加“當前樣式”。
根據思路實現過程：
1、首先創建一些示例的代碼：
...
<body>
<div id="menu"> <!--商品分類導航欄-->
<ul>
<li><a href="#one">1F手機</a></li>
<li><a href="#two">2F電腦</a></li>
<li><a href="#three">3F家電</a></li>
<li><a href="#four">4F服飾</a></li>
<li><a href="#five">5F鞋子</a></li>
</ul>
</div>
<div id="content"> <!--商品信息列表-->
<div id="one" class="test">...(具體商品)...</div>
<div id="two" class="test">...(具體商品)...</div>
<div id="three" class="test">...(具體商品)...</div>
<div id="four" class="test">...(具體商品)...</div>
<div id="five" class="test">...(具體商品)...</div>
</div>
</body>
...
以上就完成了該網站的雛形（在此不展示css的制作過程），并且點擊<ul>標簽中的各個<li>標簽都能跳轉到相應的<div>標簽。
2、設置“當前樣式”：
為了簡單起見，我們設置一個表示當前商品分類的樣式，如下所示：
.current{
background:red;
}
然后給導航欄中的“1F手機”設置一個“當前樣式”，默認我們是從頭開始瀏覽網站。接下來需要做的是利用jquery根據商品信息，自動給導航欄中的分類添加“當前樣式”。
<script>
$(document).ready(function() {
$(window).scroll(function(){
var scrolltop = $(document).scrollTop();
console.log(scrolltop ); //目的是為了在控制臺中查看滾動條的高度
var currentSorts= "";
var commoditys = $(".test"); //所有class為"test"的div
$.each(commoditys ,function() {
var divTop = $(this).offset().top;
console.log(divTop );
if (scrolltop >divTop ) {
currentSorts= "#" + $(this).attr("id");//獲取到當前所在的商品分類
}else{
return false;
}
});
//給對應分類設置“當前樣式”
var currentClass = $("#menu").find('.current'); //找到目前樣式所在的分類
if (currentSorts&¤tClass .attr("href")!=currentSorts) {
//判定條件：currentSorts是否為空 && 當前樣式所在的分類的id是否等于currentSorts
currentClass .removeClass("current");
$("#menu").find("[href="+currentSorts+"]").addClass("current");
}
});
});
</script>
這就已經完成了導航欄中分類名跟隨商品變化而變化的效果了，在這里需要解釋一下，這個效果實現的關鍵點在于，怎么樣根據左側的div區域的高度和右側的滾動條的高度去判定在哪一個分類。
在代碼中我們看到“var scrolltop = $(document).scrollTop();”指的是滾動條的高度，如圖：
另外，var divTop = $(this).offset().top;指的是該div距離瀏覽器頂部的高度，如圖：
所以我們可以根據兩者的高度，來判斷某個div區域是屬于哪個商品分類，從而對其分類名稱進行樣式的改變。
最后還有一個小小的問題，就是錨點定位偏移的情況。
可能會出現的是，點擊某一分類，自動跳轉的并不是對應div的區域，或是偏移了。參考了網上各位前輩的做法，目前我所知道的是，用兩個屬性——padding-top和maring-top來解決偏移問題，具體方法如下：
padding-top用于解決錨點區域與頂部的偏移量
margin-top用于解決錨點區域與錨點區域之間因設置的padding-top而產生的不必要偏移量
padding-top用正值，maring-top用負值，二者數值一樣
若發現最底部的錨點區域有高度不夠問題，則可以給底部錨點區域設置一個min-height解決
min-height:屬性設置元素的最小高度。
如果以后我還了解到有其他的方法，也會在這寫出來，歡迎各位提出建議或問題一起交流。
代碼學習參考：《慕課網》，網頁導航欄的制作。感謝。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
