壹 ❀ 引

我在angularjs中使用锚点这篇文章中,踩坑并简单实现了楼层导航中点击小图标跳转到对应楼层的功能;但对于楼层导航而言,还有个重要的功能就是,随着滚动条滚动,达到某层时得同步点亮楼层导航的小图片。

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

 贰 ❀ 实现思路

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

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

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

当然我们有方法模拟计算出offset().top的值,但没必要,如果你对JQ的offset().top与js的offsetTop有什么区别,以及对如何模拟出JQ的offset().top的值有兴趣,可以参照博主这篇文章 JQ的offset().top与js的offsetTop区别详解

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

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

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

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

那么现在我们得到了判断楼层入画的条件,如果某个楼层的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:;
margin:;
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:;
top:;
bottom:;
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的,所以就任性了。

如果考虑兼容性,还是得模拟实现JQ的addClass方法,有兴趣可以参考博主 js实现 addClass方法,classList与className有什么区别这篇文章。

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

JS实现网站楼层导航效果的更多相关文章

  1. jQuery防京东浮动网站楼层导航代码

    jQuery防京东浮动网站楼层导航代码   <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml" ...

  2. 二、JavaScript语言--JS实践--商城分类导航效果

    商城类导航菜单制作(以京东为例--竖向列表横向伸缩) 可以用两种方式来实现:用CSS实现和用JS实现 方法一:用CSS实现(要点:使用hover) <!DOCTYPE html PUBLIC & ...

  3. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  5. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  6. 基于 jQuery 实现的精致作品集图片导航效果

    今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示 ...

  7. Rainyday.js – 使用 JavaScript 实现雨滴效果

    Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...

  8. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 第74天:jQuery实现图片导航效果

    图片导航效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. MySQL优化/面试,看这一篇就够了

    原文链接:http://www.zhenganwen.top/articles/2018/12/25/1565048860202.html 作者:Anwen~链接:https://www.nowcod ...

  2. 《Web Development with Go》Middleware之使用gorilla.handlers

    可以方便的使用日志和压缩等功能. package main import ( "fmt" "log" "net/http" "os ...

  3. 用Loading 加载中的整页加载来做蒙层

    总结:遇见的bug 如何写一个蒙层 最初我打算的是自己写一个蒙层,但是写出来后, 不能够将整个屏幕全部覆盖.只能够覆盖 除[顶部导航] 和[左侧菜单栏] 于是我就使用了element-ui中的 [Lo ...

  4. Drawable.SetDither(Boolean) Method

    https://docs.microsoft.com/zh-cn/dotnet/api/android.graphics.drawables.drawable.setdither?view=xamar ...

  5. Logstash Multiple Pipelines

    作为生产者和消费者之间数据流的一个中心组件,需要一个 Logstash 实例负责驱动多个并行事件流的情况.默认情况下,这样的使用场景的配置让人并不太开心,使用者会遭遇所谓的条件地狱(Condition ...

  6. Git实用指南

    个人整理的一些Git概念和命令,可以速查或者快速解决某些方面的问题 一.精简入门 1.克隆仓库 克隆仓库会下载仓库完整的文件.分支和历史记录 git clone [<options>] [ ...

  7. 查看SpringBoot应用中的嵌入式tomcat的版本

    第一种,在启动springboot项目的时候,日志中可以看到 第二种,直接在maven依赖文件中查看 地址在:你的maven库文件夹/org/springframework/boot/spring-b ...

  8. windows下的go get 显示进度

    我的Go版本是:go1.12.7 1.在你的Go安装目录下找到 D:\Go\src\github.com\tools\godep\vendor\golang.org\x\tools\go\vcs\vs ...

  9. Selenium(八):其他操作元素的方法、冻结界面、弹出对话框、开发技巧

    1. 其他操作元素的方法 之前我们对web元素做的操作主要是:选择元素,然后点击元素或者输入字符串. 还有没有其他的操作了呢?有. 比如:比如鼠标右键点击.双击.移动鼠标到某个元素.鼠标拖拽等. 这些 ...

  10. js中scroll滚动相关

    js中scroll滚动相关 scroll,滚动,一般讨论的是网页整体与浏览器之间的关系. 一.元素相关 属性/方法 解释 element.scrollHeight 返回元素的整体高度. element ...