文章给您介绍在使用Transform 属性会导致子元素的 fixed 属性失效解决办法，有需要的同学可参考。
在项目中，需要为顶部导航条增加滚动跟随效果。很显然，只需要为 #header 加上 position:fixed; 属性即可，但是加上之后却无效。只能用监测浏览器滚动距离然后实时的赋值到 top 属性来模拟跟随。
但是这种方法由于浏览器之间滚动的距离不同等缘故，会导致闪烁等问题，只在 Firefox 效果完美。同时会影响性能，在中低端安卓设备中效果很差。这种影响用户体验的事情，是肯定要避免的。还是得回来使用 fixed，但是从未发现过 fixed 失效的情况啊，只能挨个测试一下。
问题发现
先写了一个 div ，赋值 fixed 属性，然后在普通网页中效果正常。将其插入无效代码平级位置，结果失效。将其插入 body 标签下级，正常。说明问题出在其父属性值中。
然后使用 Firebug 依次取消父属性值，当去掉 transform 属性值之后，fixed 生效。原来问题出在 transform 上。
然后就做了个 Demo 测试一下。
| 代码如下 |
|
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transform 属性会导致子元素的 fixed 属性失效 Demo 页面</title>
<link rel="stylesheet" type="text/css" href="../base.min.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="/js/html5.js"></script>
<![endif]-->
<style>
.fixed{position: fixed;top:10px;left:10px;width:50px;height:50px;background: blue;}
.notransform{width:200px;height:200px;background: red;}
.transform{width:200px;height:200px;background: green;-webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg);}
</style>
<script>
</script>
</head>
<body>
</header>
<article class="main-wrap">
<div class="main">
<h2>效果</h2>
<div class="show">
<div class="notransform">
<div class="fixed"></div>
</div>
<div class="transform">
<div class="fixed"></div>
</div>
</div>
<h2>代码</h2>
<h3>HTML结构</h3>
<div class="code">
<pre><div class="notransform">
<div class="fixed"></div>
</div>
<div class="transform">
<div class="fixed"></div>
</div></pre>
</div>
<h3>CSS代码</h3>
<div class="code">
<pre>.fixed{position: fixed;top:10px;left:10px;width:50px;height:50px;background: blue;}
.notransform{width:200px;height:200px;background: red;}
.transform{width:200px;height:200px;background: green;-webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg);}</pre>
</div>
<h3>JS代码</h3>
<div class="code">
<pre>无</pre>
</div>
</div>
</article>
</body>
</html>
|
这是一个坑，如果不知道的，可以记一下。因为 transform 是一个 CSS3 中比较重要的动画属性，以后的应用会越来越多。对于 position 的其他属性尚未测试，因为 fixed 比较特殊，效果比较明显
