Transform 属性会导致子元素的 fixed 属性失效

2016-03-02    编辑:safeman     点击(
文章给您介绍在使用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>&lt;div class="notransform"&gt;
 &lt;div class="fixed"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="transform"&gt;
 &lt;div class="fixed"&gt;&lt;/div&gt;
&lt;/div&gt;</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 比较特殊,效果比较明显