fixed的替代方案

Question

页面中用到fixed固定底部面板区域, 但是在vue router动画中会出现位置抖动(因为存在多个不同底部面板, 无法把面板移出transition), 具体就是顶部紧跟着内容高度而不是固定在视图下方, 查了下发现是tansfrom的标准所致

想着既然fixed布局有这个问题那我用absolute布局配合事件来实现吧, 滚动时改变bottom, 但是实现出来的效果非常生硬, 达不到fixed的流畅程度, 代码如下

    window.onscroll = () => {
      this.$refs.panel.style.bottom = -document.documentElement.scrollTop + 'px'
    }

想看看大家有没更好的解决方法

具体问题请看
https://jsfiddle.net/cL5q0b0m...

Answer 1

使用fixed同时外部再加一层bfc值得一试
代码贴详细点吧