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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
用cssText批量修改样式
Aug 29 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
利用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
PHP中英混合字符串截取函数代码
2011/07/17 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
python xml解析实例详解
2016/11/14 Python
Python 自动化表单提交实例代码
2017/06/08 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
django连接oracle时setting 配置方法
2019/08/29 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
会计专业应届生自荐信
2014/02/07 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
优质服务活动实施方案
2014/05/02 职场文书
一帮一活动总结
2014/05/08 职场文书
服务标语大全
2014/06/18 职场文书
民政局个人整改措施
2014/09/24 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
Golang中channel的原理解读(推荐)
2021/10/16 Golang