展会信息港展会大全

Transform 属性会导致子元素的 fixed 属性失效
来源:互联网   发布日期:2016-03-25 15:53:25   浏览:2707次  

导读:文章给您介绍在使用Transform 属性会导致子元素的 fixed 属性失效解决办法,有需要的同学可参考。在项目中,需要为顶部导航条增加滚动跟随效果。很显然,只需要为 #header 加上...

文章给您介绍在使用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 比较特殊,效果比较明显

赞助本站

人工智能实验室

相关热词: 开发 编程 android

相关内容
AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港