解决flex动态高度问题
Demo预览：
https://sunzsh.github.io/html-demos/sticky.html
代码 / 文件：
https://github.com/sunzsh/st-html-demo/blob/master/sticky.html
大家好
今天这个小伙伴的问题也挺好玩
他给了我一些灵感我们来模拟一下哈
他的意思是上面有一个容器
下面是主体
然后呢他想让
上面这个容器在滚动的时候
固定在浏览器顶端
所以呢他给它加了一个
position: fixed
然后呢 top
0
这样就固定住了
但是呢
滚动在最上面的时候呢
他会盖住第一句话
我们给他加一个透明度就能看出来
大家看第一句话是被盖住了
所以他为了不被遮盖住
他不得不在这个body上加一个paddding-top
比如说60
大家看这样第一句话就露出来了
但是他（说）：不能用padding-top！为什么呢？
因为（他的项目里）上面这个容器的内容是动态的
也就说他高度也是动态的
不一定是60
比如说他内容多了点
加1行
那这时候这块60就不行了
所以呢他不能用padding-top
那他就问有没有什么比较好的方法
我看到这个问题的时候
第一个想法其实就是简单一点
用 JS 来解决一下
比如说我们这不写死了
等浏览器加载完以后
我们用javascript代码来
动态设置这个 padding-top
我们来试一下啊
document.querySelector
然后这里边叫 top-bar
缺个点
好这样能拿到
然后点
应该有个 clientHeight
现在是84 （大家看）
好相当于用这句代码
就可以动态的获取到
顶部这个容器的高度
所以呢我们在下边加一段 script
我把这块先收起来
我们在这块加一个 script
然后
这个是这个高度
我们把它赋值给谁呢！很简单
document.body.style.paddingTop
等于这个
我们还要拼接个单位
px
好我们把它先关上哈
哎可以了
（大家看）我这个给它加高一点
哎也没问题好
这是我第一个想到的思路
那其实我们还有一个更简单的方法
我先把这注释掉
就是我们不用这个
position:fixed
直接把它改成 sticky
粘性布局
打卡
也是没问题的
而且这样更简单
我们直接把这块
删掉
打开
或者我再多一点
大家看！就很完美的解决了
好！今天就到这里谢谢大家
最后更新于
这有帮助吗？