Affix 吸顶效果

iview框架提供的组件 Affix 图钉,使用图钉,可以将内容固定在屏幕上,并且不随页面的滚动而滚动。常用于侧边菜单等。

同样,项目中需要吸顶效果,使用position:sticky可以轻松实现效果。但是有个坑爹的问题是,该属性并不兼容ie浏览器,项目要兼容IE11。

使用Affix 可以轻松实现想要的效果,但是对于弹窗里面,Affix 就并不能生效,这可如何是好那。

查看Affix 是如何实现并兼容IE的,发现使用的是position:fixed,然后控制偏移的位置。

欧克,那就监听页面滚动,滚动到指定位置下,动态增加position:fixed相关样式手动实现,最终效果如下


1.gif

你可能感兴趣的:(Affix 吸顶效果)