微信小程序商城_原生js完成电商侧边导航效果

原生js实现电商侧边导航效果       本文主要分享了原生js实现电商侧边导航效果的示例代码以及原理分析。具有很好的参考价值,下面跟着小编一起来看下吧

1.点击楼层跳相应楼层,用的是锚点定位

电梯: a href="#item2" 2F 个护家清 /a /li

列表title: div 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,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-colla凡科抠图e:colla凡科抠图e;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('t/font_9dwvwg9edp0q9f6r.eot');
 src: url('t/font_9dwvwg9edp0q9f6r.eot #iefix') format('embedded-opentype'),
 url('t/font_9dwvwg9edp0q9f6r.woff') format('woff'),
 url('t/font_9dwvwg9edp0q9f6r.ttf') format('truetype'),
 url('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 id="elev" 
 li a href="#item1" 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 id="item1" h3 img src="images/1f.png" /h3 /div 
 div 
 div 
 div 
 a href="#" 
 div img src="images/pic.jpg" /div 
 div 
 div 
 div Walch/威露士清新青柠水润保湿洁净健康沐浴露600mlssssssssssss /div 
 div 满188减100 /div 
 /div 
 div 
 div 
 div 月销25170件 /div 
 div b 29.9 /b /div 
 /div 
 i  /i 
 /div 
 /div 
 /div 
 /div 
 /div 
 div id="item2" h3 img src="images/2f.png" /h3 /div 
 div 
 div 
 div 
 a href="#" 
 div img src="images/pic.jpg" /div 
 div 
 div 
 div Walch/威露士清新青柠水润保湿洁净健康沐浴露600mlssssssssssss /div 
 div 满188减100 /div 
 /div 
 div 
 div 
 div 月销25170件 /div 
 div b 29.9 /b /div 
 /div 
 i  /i 
 /div 
 /div 
 /div 
 /div 
 /div 
 div id="item3" h3 img src="images/3f.png" /h3 /div 
 div 
 div 
 div 
 a href="#" 
 div img src="images/pic.jpg" /div 
 div 
 div 
 div Walch/威露士清新青柠水润保湿洁净健康沐浴露600mlssssssssssss /div 
 div 满188减100 /div 
 /div 
 div 
 div 
 div 月销25170件 /div 
 div b 29.9 /b /div 
 /div 
 i  /i 
 /div 
 /div 
 /div 
 /div 
 /div 
 div id="item4" h3 img src="images/4f.png" /h3 /div 
 div 
 div 
 div 
 a href="#" 
 div img src="images/pic.jpg" /div 
 div 
 div 
 div Walch/威露士清新青柠水润保湿洁净健康沐浴露600mlssssssssssss /div 
 div 满188减100 /div 
 /div 
 div 
 div 
 div 月销25170件 /div 
 div b 29.9 /b /div 
 /div 
 i  /i 
 /div 
 /div 
 /div 
 /div 
 /div 
 div id="item5" h3 img src="images/5f.png" /h3 /div 
 div 
 div 
 div 
 a href="#" 
 div img src="images/pic.jpg" /div 
 div 
 div 
 div Walch/威露士清新青柠水润保湿洁净健康沐浴露600mlssssssssssss /div 
 div 满188减100 /div 
 /div 
 div 
 div 
 div 月销25170件 /div 
 div b 29.9 /b /div 
 /div 
 i  /i 
 /div 
 /div 
 /div 
 /div 
 /div 
 div id="item6" h3 img src="images/6f.png" /h3 /div 
 div 
 div 
 div 
 a href="#" 
 div img src="images/pic.jpg" /div 
 div 
 div 
 div Walch/威露士清新青柠水润保湿洁净健康沐浴露600mlssssssssssss /div 
 div 满188减100 /div 
 /div 
 div 
 div 
 div 月销25170件 /div 
 div b 29.9 /b /div 
 /div 
 i  /i 
 /div 
 /div 
 /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 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!

相关阅读