关于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就好。