在前端开发中，遇到一个工具栏希望始终固定在页面左侧。设置了CSS的sticky属性后，发现滚动条出现时工具栏位置不正确。经过分析，原因是父元素未设置高度，解决方案是将sticky改为fixed，并确保父元素高度大于或等于sticky元素高度。问题得到解决，工具栏在滚动时保持固定位置。
问题
最近在写一个小游戏时，遇到了sticky标签无效的问题。在这里记录一下~
就是这个工具栏，我希望他的高度是整个页面，并且在最左边不动，因此在css中设置：
#funcarea{
height: 100%;
float: left;
position:sticky;
}
在这里，<body>标签和<html>标签的height也都为100%
（特别强调一下这个是因为子元素里用百分数表示height和width时，百分数是相对于他的父元素而言的,如果父元素没有height属性（为空）的话，在子元素里定义是没有用的）
回到原来的问题中来~
我给工具栏（#funcarea）height设置为100%后，他的确高度等于整个页面。但是仅仅是第一部分的页面，也就是说，当出现滚动条时，下面是空的，也就是这样子。
因为funcarea的高度是顶部的页面高度，当滚动条置于顶部时，是这样子的
看上去就好像什么都没有发生……
解决方案
将css里的sticky属性换成fixed
工具栏不再随滚动条变化。问题解决！
原因分析
sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 sticky属性仅在以下几个条件都满足时有效：- 父元素不能
overflow:hidden或者overflow:auto属性 - 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
- 父元素的高度不能低于sticky元素的高度
很明显，这里父元素和子元素高度相同，所以不会用到relative定位，直接用fixed就好。
扫一扫
3429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
