跳至主要內容
WindowAffix 窗口图钉

概述

WindowAffix 能将页面元素固定在一个区域内。

原理

想要实现 Affix 效果,需要获取元素的位置。我们可以借助 Element.getBoundingClientRect(),该方法返回一个 DOMRect 对象,通过这个对象可以获取元素上、右、下、左相对于视窗左上边缘的距离、xy距离以及元素宽高。
详情参见 MDN 文档:Element.getBoundingClientRect()


haneball大约 2 分钟Vue组件
BackTop 返回顶部

概述

BackTop 是一个返回页面顶部的快捷按钮。

实现

  • props 传入的自定义按钮文本,默认为“顶部”
  • 使用 requestAnimationFrame() 替代直接赋值 scrollTop = 0,以获得更好的动画效果

haneball大约 3 分钟Vue组件