floor电梯导航

平时在pc端浏览一些电商网页，就会发现有这麽一样功能：

当页面滚动到某一块区域，侧导航栏会让对应的那部分高亮显示，
在点击侧导航的某个区域，页面也会自动滚动到这区域

就如下图所示

那么这个功能使用原生js如何去写，思路是怎么样的
思路：

当页面滚动到指定位置就不会在滚动，当页面小于设置的指定位置，就能继续滚动
当鼠标点击侧导航栏中元素，页面会滚动到该元素对应的那部分区域
当页面滚动到侧导航中设定好的区域，侧导航就会高亮某个元素

HTML代码
主要有两部分，导航栏和floor区域

 <div class="subnav"><ul><li><a href="javascript:;">手机</a></li><li><a href="javascript:;">电脑</a></li><li><a href="javascript:;">平板</a></li><li><a href="javascript:;">笔记本</a></li></ul></div><div class="floor"><div class="shouji"><h1>我是手机区域</h1></div><div class="diannao"><h1>我是电脑区域</h1></div><div class="pingban"><h1>我是平板区域</h1></div><div class="bijiben"><h1>我是笔记本区域</h1></div></div>

CSS代码

<style>* {margin: 0;padding: 0;}body {position: relative;}.floor {width: 1200px;margin: auto;}.floor div {height: 500px;border: 1px solid #ccc;margin-bottom: 10px;}h1 {text-align: center;}.subnav {position: absolute;top: 800px;left: 50%;margin-left: 650px;}.subnav ul li {list-style: none;width: 70px;height: 70px;border: 1px solid #ccc;text-align: center;line-height: 70px;}footer {width: 1200px;margin: auto;height: 500px;background-color: #ccc;border: 1px solid #ccc;margin-bottom: 10px;}</style>

javascript代码

 <script>var subnav = document.querySelector('.subnav');var li = document.querySelectorAll('.subnav li');var floor = document.querySelector('.floor');var diannao = document.querySelector('.diannao');//1.如果页面滚动到电脑区域就让subnav固定到当前位置，否则就还是相对定位var diannaoTop = diannao.offsetTop;var subnavTop = subnav.offsetTop - diannaoTopdocument.onscroll = function () {if (window.pageYOffset >= diannaoTop) {subnav.style.position = 'fixed';//此时侧导航的top值就是没滚动前该元素offsetTop-滚到目标位置的offsetTop值subnav.style.top = subnavTop + 'px';} else {subnav.style.position = 'absolute';subnav.style.top = '800px'}console.log(flag);if (flag) {//3.頁面滚动到数组中指定区域，让对应的侧导航显示list.forEach((item, index) => {if (window.pageYOffset >= item) {for (var i = 0; i < li.length; i++) {li[i].style.backgroundColor = ''}li[index].style.backgroundColor = 'pink'}})}}var list = [floor.children[0].offsetTop, floor.children[1].offsetTop, floor.children[2].offsetTop, floor.children[3].offsetTop]//2.在li中点谁谁高亮，并且要滚动到相应的位置var flag = truefor (var i = 0; i < li.length; i++) {li[i].setAttribute('data-index', i);li[i].onclick = function () {//在点击时候页面肯定会滚动，所以上面的滚动事件会影响到元素背景显示，这时候就需要在点击之后停止页面滚动的监听，滚动结束在开启flag = false;for (var i = 0; i < li.length; i++) {li[i].style.backgroundColor = ''}this.style.backgroundColor = 'pink';//获取当前点击的li索引var index = this.getAttribute('data-index');//滚动的距离应该是对应数组中的位置animate(window, list[index], function () {//动画滚动完成，让flag变为true，可以继续监听页面滚动事件了flag = true;})}}//封装一个函数，主要是实现页面可以滚动function animate(obj, target, callback) {clearInterval(obj.timer);obj.timer = setInterval(() => {var tept = (target - obj.pageYOffset) / 10;tept = tept > 0 ? Math.ceil(tept) : Math.floor(tept);if (window.pageYOffset == target) {clearInterval(obj.timer);callback && callback()}console.log(tept);window.scroll(0, window.pageYOffset + tept)}, 30)}</script>

web常见特效——floor电梯导航相关推荐

【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: < ...
利用jQuery制作一个普通网页需要注意多少细节之电梯导航
目录一丶在相应部分显示或者隐藏电梯导航二丶点击电梯导航页面可以滚动到相应内容区域三丶页面滚动到某个内容区域,左侧电梯导航随之变为选中状态节流阀(互斥锁) HTML部分代码 jQuery代码我 ...
b站pink老师JavaScript的jQuery 案例代码——电梯导航案例
目录代码部分: 1.index.js(全是重点) 2.index.html(辅助作用,用于查看结构) 3.index.css(辅助作用,用于设置一开始的电梯导航display:none) 4.jqu ...
jquery实现电梯导航
效果图如下: <!DOCTYPE html><html><head><meta charset="UTF-8"><title& ...
常见特效的jquery实现
[javascript] view plain copy $("#select1").change(function() {//侦测一级菜单的change事件 varid = $ ...
HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效
这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法在页面中引入jquery和TweenMax.js的 ...
web元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/计数器/输入框/Axure原型/axure元件库/rp原型/交互控件/五星评分器/导航框架
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条 /交互控件:单/多选框.输入框.计数器.选择器.级联选择.滑动开关.滑块 ...
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/ Axure原型演示及下载地址请点击:https://www.pmdan ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...

web常见特效——floor电梯导航

floor电梯导航

web常见特效——floor电梯导航相关推荐

最新文章

热门文章