首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJanuary 19, 2017

知识要点

实现原理：

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,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 个护家清</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"><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"> 
 //在页面加载完后立即执行多个函数完美方案。
 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实现电商侧边导航效果

- Author -

夏天不做梦

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
xmlplus组件设计系列之图标（ICON）(1）
May 05 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联（二）
May 17 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
原生实现一个react-redux的代码示例
Jun 08 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 #Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 #Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 #Javascript
js实现漫天星星效果
Jan 19 #Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 #Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 #Javascript
javaScript基础详解
Jan 19 #Javascript
B+树(2) 增删改查(2) 优化(1) binlog(2) 抖音(1) redo log(1) MIME(1) 写入策略(1) 存储过程(3) instantclient(1)
You might like
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
js修改原型的属性使用介绍
2014/01/26 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
python logging日志模块以及多进程日志详解
2018/04/18 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
德国综合购物网站：OTTO
2018/11/13 全球购物
Ray-Ban雷朋西班牙官网：全球领先的太阳眼镜品牌
2018/11/28 全球购物
什么是符号链接，什么是硬链接？符号链接与硬链接的区别是什么？
2014/01/19 面试题
彩色的翅膀教学反思
2014/04/25 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
招商引资工作汇报
2014/10/28 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2014年度考核工作总结
2014/12/24 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
初三英语教学反思
2016/02/15 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
python绘制箱型图
2021/04/27 Python
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android