原生js實(shí)現(xiàn)電商側(cè)邊導(dǎo)航效果
知識要點(diǎn)
實(shí)現(xiàn)原理:
1.點(diǎn)擊樓層跳相應(yīng)樓層,用的是錨點(diǎn)定位
電梯:<a href="#item2">2F 個護(hù)家清</a></li>
列表title:<div class="floor-title" id="item2"></div>
這個沒什么好說的
2.當(dāng)點(diǎn)擊樓層跳到相應(yīng)樓層時,該樓層高亮顯示
我們的腳本主要就是實(shí)現(xiàn)這個功能。
原理獲取瀏覽器導(dǎo)航條下拉的距離與各個樓層相對于文檔頂部下拉的距離進(jìn)行校驗(yàn)。
這里需要用到的方法事件:
window.onscroll=function(){ } //瀏覽器滾動監(jiān)聽事件執(zhí)行函數(shù) .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標(biāo)簽父級 var elev=document.getElementById("elev");
遍歷所有樓層,獲取每個樓層距離文檔頂部的距離,如果滾動條的高度大于樓層的高度,就把樓層的ID賦給thisID,
每個樓層都比較一次,直到不滿足條件退出循環(huán)。
//創(chuàng)建空變量下面存儲當(dāng)前樓層的ID var thisID=""; //遍歷所有樓層 for(var i=0;i<items.length;i++){ //獲取每個樓層距離文檔頂部的距離 var itemTop=items[i].offsetTop; //console.log(itemTop) //如果滾動條的高度大于樓層的高度,就把樓層的ID賦給thisID //每個樓層都比較一次,直到不滿足條件退出循環(huán) if(top>itemTop-100){//減去100是為了用戶體驗(yàn),自己測試下就懂了 thisID=items[i].id; }else{ break; } }
最后就是給當(dāng)前樓層添加高亮樣式,其他的刪除樣式。
因?yàn)橛玫氖窃鷍s,沒有jquery強(qiáng)大的選擇器所以還要用一個循環(huán)遍歷獲取href值是當(dāng)前樓層的ID,
這里需要注意的是,在js里 .href 獲取的是個完整的鏈接,所以要用split()方法分割為數(shù)組,數(shù)組的最后一位就是ID了
//所有a標(biāo)簽 var alinks=elev.getElementsByTagName("a"); if(thisID){ for(var j=0;j<alinks.length;j++){ //因?yàn)楂@取的是一個完整鏈接所以要切割兩半 var _href=alinks[j].href.split("#"); //對數(shù)組最后一位和當(dāng)前高度樓層的id進(jìn)行校驗(yàn) if(_href[_href.length-1]!=thisID){ alinks[j].className=""; }else{ addClass(alinks[j],"current") } } }
完整代碼
注:圖片鏈接自己替換下,再多復(fù)制些商品列表讓瀏覽器足以滿屏
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>demo</title> <style> body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{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 個護(hù)家清</a></li> <li><a href="#item3">3F 糧油干貨</a></li> <li><a href="#item4">4F 母嬰用品</a></li> <li><a href="#item5">5F 進(jìn)口食品</a></li> <li><a href="#item6">6F 紙品日百</a></li> </ul> </div> <div id="wrap"> <div class="floor-title" id="item1"><h3 class="floor-text"><img src="images/1f.png"></h3></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"><h3 class="floor-text"><img src="images/2f.png"></h3></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"><h3 class="floor-text"><img src="images/3f.png"></h3></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"><h3 class="floor-text"><img src="images/4f.png"></h3></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"><h3 class="floor-text"><img src="images/5f.png"></h3></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"><h3 class="floor-text"><img src="images/6f.png"></h3></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"> //在頁面加載完后立即執(zhí)行多個函數(shù)完美方案。 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); //在頁面加載完后立即執(zhí)行多個函數(shù)完美方案over。 //給元素在原來基礎(chǔ)上添加一個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標(biāo)簽父級 var elev=document.getElementById("elev"); //創(chuàng)建空變量下面存儲當(dāng)前樓層的ID var thisID=""; //遍歷所有樓層 for(var i=0;i<items.length;i++){ //獲取每個樓層距離文檔頂部的距離 var itemTop=items[i].offsetTop; //console.log(itemTop) //如果滾動條的高度大于樓層的高度,就把樓層的ID賦給thisID //每個樓層都比較一次,直到不滿足條件退出循環(huán) if(top>itemTop-100){//減去100是為了用戶體驗(yàn),自己測試下就懂了 thisID=items[i].id; }else{ break; } } //所有a標(biāo)簽 var alinks=elev.getElementsByTagName("a"); if(thisID){ for(var j=0;j<alinks.length;j++){ //因?yàn)楂@取的是一個完整鏈接所以要切割兩半 var _href=alinks[j].href.split("#"); //對數(shù)組最后一位和當(dāng)前高度樓層的id進(jìn)行校驗(yàn) if(_href[_href.length-1]!=thisID){ alinks[j].className=""; }else{ addClass(alinks[j],"current") } } } } } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
JavaScript浮點(diǎn)數(shù)及運(yùn)算精度調(diào)整詳解
浮點(diǎn)數(shù)的精度問題不是JavaScript特有的,本文主要介紹了JavaScript浮點(diǎn)數(shù)及運(yùn)算精度調(diào)整詳解,有需要的朋友可以了解一下。2016-10-1010個基于瀏覽器的JavaScript調(diào)試工具分享
調(diào)試Javascript可能是web開發(fā)中最讓人郁悶的事情,這里是10款我們精選的基于瀏覽器的JS在線調(diào)試工具,感興趣的朋友可以參考下,或許對你有所幫助2013-02-02JS實(shí)現(xiàn)頁面中所有img對象添加onclick事件及新窗口查看圖片的方法
這篇文章主要介紹了JS實(shí)現(xiàn)頁面中所有img對象添加onclick事件及新窗口查看圖片的方法,涉及JS頁面元素遍歷及屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12JavaScript數(shù)字和字符串轉(zhuǎn)換示例
這篇文章主要介紹了JavaScript數(shù)字和字符串轉(zhuǎn)換的應(yīng)用,需要的朋友可以參考下2014-03-03JavaScript中exec函數(shù)用法實(shí)例分析
這篇文章主要介紹了JavaScript中exec函數(shù)用法,較為詳細(xì)的分析了javascript中exec函數(shù)的功能、定義及使用方法,需要的朋友可以參考下2015-06-06JS基于ES6新特性async await進(jìn)行異步處理操作示例
這篇文章主要介紹了JS基于ES6新特性async await進(jìn)行異步處理操作,結(jié)合實(shí)例形式分析了async await進(jìn)行異步處理操作的相關(guān)原理、步驟與注意事項(xiàng),需要的朋友可以參考下2019-02-02javascript中的循環(huán)語句for語句深入理解
for循環(huán)是多數(shù)語言都有的。在javascript中,for循環(huán)有幾種不同的使用情況,下面為大家一一介紹下2014-04-04element-ui的表單驗(yàn)證清除校驗(yàn)提示語的解決方案
對表單域中的數(shù)據(jù)進(jìn)行校驗(yàn)的時候,其中有一項(xiàng)比較特殊,不是簡單的輸入框,下拉框這些表單元素,而是自己寫的一個el-table的選擇彈窗,本文給大家介紹element-ui的表單驗(yàn)證如何清除校驗(yàn)提示語,感興趣的朋友一起看看吧2024-01-01