JS实现网站楼层导航效果代码实例


Posted in Javascript onJune 16, 2020

壹 ❀ 引言

对于楼层导航而言,还有个重要的功能就是,随着滚动条滚动,达到某层时得同步点亮楼层导航的小图片。

由于我前面也说了不打算使用JQ,所以想着用JS去实现它,实现并不难,主要得弄清滚动满足怎样的条件才应该点亮对应楼层,我们先看看实现效果:

JS实现网站楼层导航效果代码实例

贰 ❀ 实现思路

第一点,因为是由滚动触发的楼层判断,所以肯定离不开onscroll事件。

第二点,我们貌似要获取每个楼层顶端距离视窗顶部的距离,随着滚动条往下滚动,此距离会不断缩小,当接近到某个距离时我们判定此楼层入画,当然其它楼层都满足此判定。

而JQ提供了一个offset().top方法能获取这个值,js中只有一个offsetTop属性,获取的是距离自己最近position属性为非static的祖先元素的距离,此距离不随滚动条滚动而缩小。

当然我们有方法模拟计算出offset().top的值,但没必要

这里我直接引用了我之前博客得到的结论:offset().top =offsetTop -scrollTop(offsetTop参考对象为根元素)。

为了方便理解,我们假设楼层壹顶端距离视窗顶端为0时,此时判定楼层壹入画,即楼层导航中第一个按钮应该被点亮。

JS实现网站楼层导航效果代码实例

由于offset().top = offsetTop - scrollTop,此时楼层壹距离顶端已经为0,我们可以得出当楼层壹的offsetTop = scrollTop时,我们认定楼层壹入画。

而当楼层贰入画时,楼层贰的offsetTop也等于滚动条的距离,此时楼层壹自然会出画:

JS实现网站楼层导航效果代码实例

那么现在我们得到了判断楼层入画的条件,如果某个楼层的offsetTop属性的值小于等于滚动条距离时(如果用等于条件过于苛刻,很难刚好滚动到这个距离点上),我们点亮对应楼层的导航logo。

为了让效果更加自然,我们肯定不会真的让某个楼层紧贴顶部时才判定它满足条件,肯定是提前某个距离就判定满足,所以真正的条件应该是offsetTop - 100(这个数字看自己感觉) <= scrollTop

你是否会有,楼层贰入画时楼层壹依然满足offsetTop<=scrollTop条件的疑惑?在JQ里面,我们给某个元素添加点亮class的同时,还会清除掉兄弟元素的该class。

所以在JS里面也是如此,我们利用满足楼层的索引来控制样式,而后者满足条件的索引始终会覆盖前面的索引,所以被点亮的永远只有一个。

现在弄懂了思路,代码就好些了,下面直接贴上了实现代码:

叁 ❀ 实现代码

HTML部分:

<div class="floor">
  <div style="background: #ffb6b9">壹</div>
  <div style="background: #fae3d9">贰</div>
  <div style="background: #bbded6">叁</div>
  <div style="background: #8ac6d1">肆</div>
  <div style="background: #fff1ac">伍</div>
</div>
<ul class="floorNav">
  <li>壹</li>
  <li>贰</li>
  <li>叁</li>
  <li>肆</li>
  <li>伍</li>
</ul>

CSS部分:

* {
  padding: 0;
  margin: 0;
  list-style: none;
}

.floor>div {
  height: 900px;
  line-height: 900px;
  text-align: center;
  color: #fff;
  font-size: 40px;
}

.floorNav {
  width: 40px;
  height: 200px;
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #ddd;
}

.floorNav>li {
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
}

.active {
  background: #e4393c;
  color: #fff;
}

JS部分:

//获取楼层
let floors = document.querySelectorAll(".floor>div");
//获取楼层导航
let floorNavs = document.querySelectorAll(".floorNav>li");
//滚动监听
window.onscroll = function () {
  //获取滚动条高度,兼容ie
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  //符合点亮条件的楼层索引
  let activeIndex;
  //楼层导航图标点亮控制
  floors.forEach((floor, index) => {
    //检查各楼层顶端距离视窗顶端距离,如果满足条件则修改楼层图标
    floor.offsetTop - 100 <= scrollTop ? activeIndex = index : null;
  });
  //根据索引数设置楼层样式
  floorNavs.forEach((nav, index) => {
    index === activeIndex ? nav.classList.add('active') : nav.classList.remove('active');
  });
};

需要注意的是,这里我使用了js中操作classList对象的add方法与remove方法,这两个方法IE并不支持,因为我这边是不需要考虑IE的,所以就任性了。

本文只是提供了一个楼层导航的思路,实现肯定不是很好,若有更佳的做法,欢迎留言讨论,那么本文结束。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
javascript实现的简单计时器
Jul 19 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 #Javascript
JS 5种遍历对象的方式
Jun 16 #Javascript
js实现小球在页面规定的区域运动
Jun 16 #Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 #Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 #Javascript
详解JS预解析原理
Jun 16 #Javascript
深入了解JS之作用域和闭包
Jun 16 #Javascript
You might like
星际原理概述
2020/03/04 星际争霸
PHP 的 __FILE__ 常量
2007/01/15 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
利用python爬取软考试题之ip自动代理
2017/03/28 Python
python标记语句块使用方法总结
2019/08/05 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Python xlwt模块使用代码实例
2020/06/10 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
工厂仓管员岗位职责
2014/01/01 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
简历中的自我评价范文
2014/02/05 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
如何通过cmd 连接阿里云服务器
2022/04/18 Servers