关于sticky属性无效的问题

问题

最近在写一个小游戏时，遇到了sticky标签无效的问题。在这里记录一下~

就是这个工具栏，我希望他的高度是整个页面，并且在最左边不动，因此在css中设置：

#funcarea{
	height: 100%;
	float: left;
	position:sticky;
}

在这里，标签和标签的height也都为100%

（特别强调一下这个是因为子元素里用百分数表示height和width时，百分数是相对于他的父元素而言的,如果父元素没有height属性（为空）的话，在子元素里定义是没有用的）

回到原来的问题中来~
我给工具栏（#funcarea）height设置为100%后，他的确高度等于整个页面。但是仅仅是第一部分的页面，也就是说，当出现滚动条时，下面是空的，也就是这样子。
因为funcarea的高度是顶部的页面高度，当滚动条置于顶部时，是这样子的
看上去就好像什么都没有发生……

解决方案

将css里的sticky属性换成fixed

工具栏不再随滚动条变化。问题解决！

原因分析

sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 sticky属性仅在以下几个条件都满足时有效：

1. 父元素不能overflow:hidden或者overflow:auto属性
2. 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3. 父元素的高度不能低于sticky元素的高度

很明显，这里父元素和子元素高度相同，所以不会用到relative定位，直接用fixed就好。