您的位置: 首页 > 文章 > 监听滚动事件，实现导航栏吸顶css3动画效果--vue

监听滚动事件，实现导航栏吸顶css3动画效果--vue

分类: 文章 • 2024-02-21 23:20:40

功能描述：当子组件滚动到100时导航栏置顶（如下所示）

之前：

监听滚动事件，实现导航栏吸顶css3动画效果--vue

之后:

监听滚动事件，实现导航栏吸顶css3动画效果--vue

动画效果

监听滚动事件，实现导航栏吸顶css3动画效果--vue

功能实现主要代码（代码不完整，请理解代码选取自己需要的部分）：

实现思路：
中间可滚动的部分是子组件，（大家，关注，我的）这一栏导航是父组件。
步骤一：在父组件里监控子组件与父元素顶部的距离

如下是在父组件中时：

监听滚动事件，实现导航栏吸顶css3动画效果--vue

在子组件中时：

监听滚动事件，实现导航栏吸顶css3动画效果--vue

若有疑惑请在下方留言