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