js获取元素距离页面顶部的距离_如何做一个悬浮按钮？ JS 计算高度API应用

Web 开发中经常会遇到需要计算高度的的需求，最常见的就是滚动到底部加载更多数据，还有H5开发中，UI 经常会提一些涉及滚动的特殊效果。为了实现这些效果，我们需要准确理解 js 中各种计算高度 API。只看定义对大家来说理解帮助不是很大，所以这里我通过应用说明这些 API。

实现一个悬浮按钮

在线效果：/mialeung01/pen/xxOZrQx

注意：因为 codepen 里没法监听窗口resize，所以如果调整了窗口大小请刷新下，不然计算出来会有问题。真正开发时要监听窗口变动的事件哦。

效果：按钮在内容块里悬浮，滚动到内容div 最底端某一位置时固定在该位置，继续往下滑动也是固定，如 gif 图所示。

原理及 API 介绍

这个效果的原理很简单，就是监听网页的滚动事件，当 浏览器视口的高度 + 网页滚动的距离 - 固定按钮离浏览器窗口底部的距离 - 固定按钮高度= 占位按钮顶部离网页文档顶部的高度 时，将按钮的 position：fixed 更新为 static。文字描述比较抽象，看图说话。

先介绍这些怎么计算：

1、计算视口高度。

视口高度就是浏览器内不包括导航栏、工具栏等部分的高度，如下图所示：

获取这个高度的方法有三种：

获取视口高度

IE9+：

IE8 以前：或

所以兼容写法就是：

const viewportHeight = window.innerHeight || window.document.clientHeight || window.

2、网页滚动的高度

这个比较简单：

获取整个网页文档滚动高度

3、计算页面某元素离文档顶部的距离

HTMLElement的 offsetTop 属性是相对于其 offsetParent 元素的顶部内边距的距离。返回一个指向最近的(指包含层级上的最近)包含该元素的定位元素(即非static的元素)或者最近的 table,td,th,body元素。

所以，如果该元素的父元素是 body，那它的 offsetTop 就是元素离页面顶部的高度了

这个比较简单：

获取元素(父元素为body)到文档顶部高度

HTMLElemen

4、计算元素自身的高度

获取元素自身高度 + padding + boder 的高度

HTMLElemen

获取元素自身高度 + padding

HTMLElemen

图片来自 /zh-CN/

实现

页面先写一个占位按钮，然后写一个fixed 在离底部 40px 的相同的按钮：

计算上面说的四个高度，监听scroll 事件，当网页滚动的距离 + 浏览器窗口的高度 - 按钮高度 - 按钮离浏览器窗口底部的距离 = 按钮顶部离网页文档顶部的高度时，隐藏占位用的按钮，将 fixed 的按钮 position 改为 static，让它重新进入文档流。

这样就写完了，非常简单吧。

相似的应用

如下图这个效果，滚动到某个区域改变 title 值：

这个也非常简单，计算每个部分的高度，监听滚动事件，当网页scrollTop 高度在某个区域的高度内，就改变标题，具体代码

滚动固定title

/mialeung01/pen/wvWZpwL?editors=0110

还有实现中奖记录滚动功能

中奖记录滚动

/mialeung01/pen/ZEOQoWd

and so on，可以自己实现下，知道原理。

END~ ?

关注公众号

秒客网

js获取元素距离页面顶部的距离_如何做一个悬浮按钮？ JS 计算高度API应用

相关文章