首页
前端开发
HTML5
JavaScript动态悬浮图标效果

JavaScript动态悬浮图标效果

0 次浏览 0 条评论
rar
rar

js 的运动图标悬浮滚动效果，挺常用在一些酷炫的页面交互里。说白了，就是让一个图标一直“飘”在你屏幕上，怎么滚都在，顺带还能动起来。这个功能主要靠 CSS 的 position: fixed 配合 JavaScript 的 requestAnimationFrame 来实现，动画顺滑、响应也快。

先搞清楚“悬浮滚动”是啥。就是图标一直固定在浏览器窗口的某个位置，滚动页面时不跟着走。用 position: fixed 一句搞定定位。

就是动效部分。可以搞个 SVG 或 GIF 图标，通过 CSS 动画 或 JS 动态控制位置 来动起来。关键点是用 requestAnimationFrame，比 setTimeout 更流畅不卡顿。

监听用户滚动事件也简单，加个 window.addEventListener('scroll', fn) 就行。在回调里拿到滚动距离，比如 window.pageYOffset，更新图标的位置。

代码大致长这样：

let icon = document.getElementById('icon');
function scrollHandler() {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  icon.style.top = scrollTop + 100 + 'px';
  requestAnimationFrame(scrollHandler);
}
window.addEventListener('scroll', scrollHandler);

这种方式适合做提示按钮、客服入口、返回顶部这些场景，实用性还挺高。如果你想看看更完整的实现，可以参考下面这个滚动悬浮按钮的案例。

相关的还有像 HTML 元素鼠标滚动事件、图片滚动代码 等文章，思路挺相通的。

如果你在做页面动效或者交互提示，不妨试试看这种方式，简单又有感觉。

rar 文件大小：18.47KB