vue项目笔记(26)-header组件渐隐渐现效果

header组件渐隐渐现效果实现

效果描述:

在滚动页面的时候,页面向上滚动一定距离的时候,header组件的“景点详情”渐渐出现,原有的banner图上面的“返回”消失。页面向下滚动一定距离后,效果反之。如图:

vue项目笔记(26)-header组件渐隐渐现效果_第1张图片

思路分析:

实现上述效果,必须对window的scroll事件进行监听,动态绑定样式,如下:

 

你可能感兴趣的:(Vue,动画,窗口滚动)