這篇文章給大家分享的是有關js如何實現電商側邊導航效果的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
知識要點
實現原理：
1.點擊樓層跳相應樓層，用的是錨點定位
電梯：<a href="#item2">2F 個護家清</a></li>
列表title：<div class="floor-title" id="item2"></div>
這個沒什么好說的
2.當點擊樓層跳到相應樓層時，該樓層高亮顯示
我們的腳本主要就是實現這個功能。
原理獲取瀏覽器導航條下拉的距離與各個樓層相對于文檔頂部下拉的距離進行校驗。
這里需要用到的方法事件：
window.onscroll=function(){ } //瀏覽器滾動監聽事件執行函數
.scrollTop //獲取滾動條下拉的高度，大家可以用 console.log(top) 試一下就明白了
.offsetTop //獲取元素距離文檔頂部的距離大體過程分析
首先獲取滾動條下拉的高度，以及存儲一些會用到的變量
//獲取滾動條下拉的高度
var top=document.documentElement.scrollTop||document.body.scrollTop;
//console.log(top)
//所有樓層
var items=document.getElementById("wrap").getElementsByClassName("floor-title");
//a標簽父級
var elev=document.getElementById("elev");遍歷所有樓層，獲取每個樓層距離文檔頂部的距離，如果滾動條的高度大于樓層的高度，就把樓層的ID賦給thisID，
每個樓層都比較一次，直到不滿足條件退出循環。
//創建空變量下面存儲當前樓層的ID
var thisID="";
//遍歷所有樓層
for(var i=0;i<items.length;i++){
//獲取每個樓層距離文檔頂部的距離
var itemTop=items[i].offsetTop;
//console.log(itemTop)
//如果滾動條的高度大于樓層的高度，就把樓層的ID賦給thisID
//每個樓層都比較一次，直到不滿足條件退出循環
if(top>itemTop-100){//減去100是為了用戶體驗，自己測試下就懂了
thisID=items[i].id;
}else{
break;
}
}最后就是給當前樓層添加高亮樣式，其他的刪除樣式。
因為用的是原生js，沒有jquery強大的選擇器所以還要用一個循環遍歷獲取href值是當前樓層的ID，
這里需要注意的是，在js里 .href 獲取的是個完整的鏈接，所以要用split()方法分割為數組，數組的最后一位就是ID了
//所有a標簽
var alinks=elev.getElementsByTagName("a");
if(thisID){
for(var j=0;j<alinks.length;j++){
//因為獲取的是一個完整鏈接所以要切割兩半
var _href=alinks[j].href.split("#");
//對數組最后一位和當前高度樓層的id進行校驗
if(_href[_href.length-1]!=thisID){
alinks[j].className="";
}else{
addClass(alinks[j],"current")
}
}
}完整代碼
注：圖片鏈接自己替換下，再多復制些商品列表讓瀏覽器足以滿屏
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h2,h3,h4,h5,h6,h7,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h2,h3,h4,h5,h6,h7{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
body{background: #9B1BC5;}
@font-face {
font-family: 'iconfont'; /* project id 196174 */
src: url('https://at.alicdn.com/t/font_9dwvwg9edp0q9f6r.eot');
src: url('https://at.alicdn.com/t/font_9dwvwg9edp0q9f6r.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_9dwvwg9edp0q9f6r.woff') format('woff'),
url('https://at.alicdn.com/t/font_9dwvwg9edp0q9f6r.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_9dwvwg9edp0q9f6r.svg#iconfont') format('svg');
}
.cart{
font-family:"iconfont" !important;
font-size:36px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
cursor: pointer;
color: #dd2727;
height: 36px;
width: 36px;
padding: 0;
line-height: 1;
position: absolute;
right: 0;
bottom: 0;
}
.floor-title{width: 990px; margin: 0 auto; overflow: hidden;}
.floor-text{width:990px; height: 80px; margin: 10px auto 0; font-size: 100%;}
.content{width: 990px; margin: 0 auto; overflow: hidden;}
.list0{font-size: 0; margin: 0 -10px -10px 0;}
.item{display: inline-block; vertical-align: top; width: 190px; margin:0 10px 10px 0; background: #fff; position: relative; line-height: 1.2;}
.item a{display: block;}
.item-main{padding: 9px; position: relative;}
.item-title{font: 14px/1.3 tahoma,arial,"\5b8b\4f53"; color: #313D44; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow: hidden; margin-bottom: 3px;}
.item-desc{font: 12px/1.2 tahoma,arial,"\5b8b\4f53"; color: #dd2727; margin-bottom: 5px;}
.item-imp{font: 12px/1.2 tahoma,arial,"\5b8b\4f53"; margin-top: 9px; padding-right: 35px; position: relative;}
.item-sales{color: #666;}
.promotion-price{font-size: 18px; color: #dd2727; font-weight: 700; font-family: Helvetica; line-height: 1.1; display: inline-block;}
.promotion-price:first-letter {font-size: 14px; font-weight: 400; margin-right: 1px;}
.elevator{position: fixed; left: 50%; margin-left: 505px; bottom: 60px; width: 100px; font: 12px/1.5 "Microsoft Yahei",tahoma,arial;}
.elevator ul{background: #B50100;}
.elevator ul li a{height: 25px; line-height: 25px; color: #fff; display: block; text-align: center;}
.elevator ul li a:hover,
.elevator ul li a.current{background: #800100;}
</style>
</head>
<body>
<div class="elevator" id="elev">
<ul>
<li><a href="#item1" class="current">1F 休閑食品</a></li>
<li><a href="#item2">2F 個護家清</a></li>
<li><a href="#item3">3F 糧油干貨</a></li>
<li><a href="#item4">4F 母嬰用品</a></li>
<li><a href="#item5">5F 進口食品</a></li>
<li><a href="#item6">6F 紙品日百</a></li>
</ul>
</div>
<div id="wrap">
<div class="floor-title" id="item1"><h4 class="floor-text"><img src="images/1f.png"></h4></div>
<div class="content">
<div class="list0">
<div class="item">
<a href="#">
<div class="img-wrap"><img src="images/pic.jpg"></div>
<div class="item-main">
<div class="item-info">
<div class="item-title">Walch/威露士清新青檸水潤保濕潔凈健康沐浴露600mlssssssssssss</div>
<div class="item-desc">滿188減100</div>
</div>
<div class="item-imp">
<div class="imp-main">
<div class="item-sales">月銷25170件</div>
<div class="item-price"><b class="promotion-price">¥29.9</b></div>
</div>
<i class="cart"></i>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="floor-title" id="item2"><h4 class="floor-text"><img src="images/2f.png"></h4></div>
<div class="content">
<div class="list0">
<div class="item">
<a href="#">
<div class="img-wrap"><img src="images/pic.jpg"></div>
<div class="item-main">
<div class="item-info">
<div class="item-title">Walch/威露士清新青檸水潤保濕潔凈健康沐浴露600mlssssssssssss</div>
<div class="item-desc">滿188減100</div>
</div>
<div class="item-imp">
<div class="imp-main">
<div class="item-sales">月銷25170件</div>
<div class="item-price"><b class="promotion-price">¥29.9</b></div>
</div>
<i class="cart"></i>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="floor-title" id="item3"><h4 class="floor-text"><img src="images/3f.png"></h4></div>
<div class="content">
<div class="list0">
<div class="item">
<a href="#">
<div class="img-wrap"><img src="images/pic.jpg"></div>
<div class="item-main">
<div class="item-info">
<div class="item-title">Walch/威露士清新青檸水潤保濕潔凈健康沐浴露600mlssssssssssss</div>
<div class="item-desc">滿188減100</div>
</div>
<div class="item-imp">
<div class="imp-main">
<div class="item-sales">月銷25170件</div>
<div class="item-price"><b class="promotion-price">¥29.9</b></div>
</div>
<i class="cart"></i>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="floor-title" id="item4"><h4 class="floor-text"><img src="images/4f.png"></h4></div>
<div class="content">
<div class="list0">
<div class="item">
<a href="#">
<div class="img-wrap"><img src="images/pic.jpg"></div>
<div class="item-main">
<div class="item-info">
<div class="item-title">Walch/威露士清新青檸水潤保濕潔凈健康沐浴露600mlssssssssssss</div>
<div class="item-desc">滿188減100</div>
</div>
<div class="item-imp">
<div class="imp-main">
<div class="item-sales">月銷25170件</div>
<div class="item-price"><b class="promotion-price">¥29.9</b></div>
</div>
<i class="cart"></i>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="floor-title" id="item5"><h4 class="floor-text"><img src="images/5f.png"></h4></div>
<div class="content">
<div class="list0">
<div class="item">
<a href="#">
<div class="img-wrap"><img src="images/pic.jpg"></div>
<div class="item-main">
<div class="item-info">
<div class="item-title">Walch/威露士清新青檸水潤保濕潔凈健康沐浴露600mlssssssssssss</div>
<div class="item-desc">滿188減100</div>
</div>
<div class="item-imp">
<div class="imp-main">
<div class="item-sales">月銷25170件</div>
<div class="item-price"><b class="promotion-price">¥29.9</b></div>
</div>
<i class="cart"></i>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="floor-title" id="item6"><h4 class="floor-text"><img src="images/6f.png"></h4></div>
<div class="content">
<div class="list0">
<div class="item">
<a href="#">
<div class="img-wrap"><img src="images/pic.jpg"></div>
<div class="item-main">
<div class="item-info">
<div class="item-title">Walch/威露士清新青檸水潤保濕潔凈健康沐浴露600mlssssssssssss</div>
<div class="item-desc">滿188減100</div>
</div>
<div class="item-imp">
<div class="imp-main">
<div class="item-sales">月銷25170件</div>
<div class="item-price"><b class="promotion-price">¥29.9</b></div>
</div>
<i class="cart"></i>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//在頁面加載完后立即執行多個函數完美方案。
function addloadEvent(func){
var oldonload=window.onload;
if(typeof window.onload !="function"){
window.onload=func;
}
else{
window.onload=function(){
if(oldonload){
oldonload();
}
func();
}
}
}
addloadEvent(b);
//在頁面加載完后立即執行多個函數完美方案over。
//給元素在原來基礎上添加一個className
function addClass(element,value){
if(!element.className){
element.className=value;
}
else{
newClassName=element.className;
newClassName+=" ";
newClassName+=value;
element.className=newClassName;
}
}
function b(){
window.onscroll=function(){
//獲取滾動條下拉的高度
var top=document.documentElement.scrollTop||document.body.scrollTop;
//console.log(top)
//所有樓層
var items=document.getElementById("wrap").getElementsByClassName("floor-title");
//a標簽父級
var elev=document.getElementById("elev");
//創建空變量下面存儲當前樓層的ID
var thisID="";
//遍歷所有樓層
for(var i=0;i<items.length;i++){
//獲取每個樓層距離文檔頂部的距離
var itemTop=items[i].offsetTop;
//console.log(itemTop)
//如果滾動條的高度大于樓層的高度，就把樓層的ID賦給thisID
//每個樓層都比較一次，直到不滿足條件退出循環
if(top>itemTop-100){//減去100是為了用戶體驗，自己測試下就懂了
thisID=items[i].id;
}else{
break;
}
}
//所有a標簽
var alinks=elev.getElementsByTagName("a");
if(thisID){
for(var j=0;j<alinks.length;j++){
//因為獲取的是一個完整鏈接所以要切割兩半
var _href=alinks[j].href.split("#");
//對數組最后一位和當前高度樓層的id進行校驗
if(_href[_href.length-1]!=thisID){
alinks[j].className="";
}else{
addClass(alinks[j],"current")
}
}
}
}
}
</script>
</body>
</html>感謝各位的閱讀！關于“js如何實現電商側邊導航效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
