php侧边栏导航效果,原生js实现电商侧边导航效果
知识要点
实现原理:
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 纸品日百
//在页面加载完后立即执行多个函数完美方案。
function addloadEvent(func){
var oldοnlοad=window.onload;
if(typeof window.onload !="function"){
window.οnlοad=func;
}
else{
window.οnlοad=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.οnscrοll=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
//获取每个楼层距离文档顶部的距离
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
//因为获取的是一个完整链接所以要切割两半
var _href=alinks[j].href.split("#");
//对数组最后一位和当前高度楼层的id进行校验
if(_href[_href.length-1]!=thisID){
alinks[j].className="";
}else{
addClass(alinks[j],"current")
}
}
}
}
}
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持PHP中文网!
更多原生js实现电商侧边导航效果相关文章请关注PHP中文网!
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
php侧边栏导航效果,原生js实现电商侧边导航效果相关推荐
- html js 动画效果,原生js html5 canvas 3D云动画效果
特效描述:原生js html5canvas 3D云动画效果.3D云效果,叼炸天!可用鼠标控制方向!本地要localhost才能正常演示 代码结构 1. 引入JS 2. HTML代码 varying v ...
- canvas下雪效果(原生js)
效果展示: 源码展示: <!doctype html> <html> <head><meta charset="utf-8">< ...
- html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
- 原生js实现文字循环向上滚动效果
原生js实现文字循环向上滚动效果 css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度,最好比内容区域高度低点,产生滚动条) #scrollArea {width: 400px; ...
- jquery电商分类导航js特效
下载地址 jquery电商分类导航特效,常见的网站左侧垂直商品分类菜单样式. dd:
- react基础06--react综合案例-电商网站导航
react基础06--react综合案例-电商网站导航 1 介绍 2 案例设计模块 2.1 分类导航数据模型设计 2.2 一级分类导航切换高亮效果 2.3 显示二级分类导航 2.4 路由跳转到二级导航 ...
- 使用jq实现电商网站“楼梯”效果制作(左侧显示楼层号、显示对应楼层信息)
使用jq实现电商网站"楼梯"效果制作 思路 : 1.点击左侧的楼层号 显示对应的楼层信息 操作当前点击的楼层号的高亮显示 点击不同楼层号 设置页面滚走的距离 为当前楼层距离内容窗口 ...
- 电商C4D设计素材背景,3D效果是最适合电商产品
在电商行业工作过一段时间的美工设计师们应该都会有这样的切身体会,那就是行业的视觉要求越来越高,人力抠图套模板已经淘汰了,并且随着官方提供出AI智能作图工具的使用,未来的趋势一定是简单的促销海报图和基础 ...
- Android肝帝战纪之基于上篇单Activity+多Fragment框架,开发电商式导航栏,多Fragment切换
电商式导航栏,多Fragment切换 本文默认在已经搭建好的框架上进行开发 点此链接到上一篇基础框架的搭建 界面构思示意图 设计思路 在底部的LinearLayout中添加相应的图标,然后设置tag绑 ...
最新文章
- pythongui界面实例带注释_python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例...
- Openstack-mitakaCentos7.2双节点搭建--(一)基础服务搭建
- 织梦CMS AJAX分页,可自定义typeid,调取任意内容
- typedef 字符串_typedef在C中使用字符数组(定义别名来声明字符串)的示例
- 如何输入一个整数逆序输出_如何匹配DSP输入输出信号
- 2020 年 7 个软件开发趋势
- 【SpringMVC】返回视图中包含数据(ModelAndView)
- 爱奇艺龚宇:今日头条购买院线电影全网免费播放的模式不可持续
- 说说.NET中忽视的方法
- 仿微信朋友圈图片按下效果
- Win10访问不了Samba网络共享的原因以及解决办法
- android 恢复出厂设置 时间,安卓恢复出厂设置
- 上交所实时行情文件汇总
- 顺序匹配网络:基于检索的聊天机器人中多回合响应选择的新架构
- 进击的马云,失落的码农
- window自带的计算机应用程序,Win10系统电脑不小心将自带的应用程序卸载了该怎么恢复...
- 什么时候用C而不用C++?
- 2021阿里云供应链大赛--需求预测与单级库存优化参赛总结
- 大一计算机虚拟机,虚拟机对电脑伤害大吗
- 学生论坛管理系统的设计与实现