php侧边栏导航效果,原生js实现电商侧边导航效果

最新推荐文章于 2021-04-14 00:16:05 发布

wongzo

最新推荐文章于 2021-04-14 00:16:05 发布

阅读量365

点赞数

文章标签： php侧边栏导航效果

知识要点

实现原理：

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

电梯：2F 个护家清

列表title：

这个没什么好说的

2.当点击楼层跳到相应楼层时，该楼层高亮显示

我们的脚本主要就是实现这个功能。

原理获取浏览器导航条下拉的距离与各个楼层相对于文档顶部下拉的距离进行校验。

这里需要用到的方法事件：window.οnscrοll=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

//获取每个楼层距离文档顶部的距离

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

//因为获取的是一个完整链接所以要切割两半

var _href=alinks[j].href.split("#");

//对数组最后一位和当前高度楼层的id进行校验

if(_href[_href.length-1]!=thisID){

alinks[j].className="";

}else{

addClass(alinks[j],"current")

}

完整代码

注：图片链接自己替换下，再多复制些商品列表让浏览器足以满屏

demo

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;}

1F 休闲食品
2F 个护家清
3F 粮油干货
4F 母婴用品
5F 进口食品
6F 纸品日百