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

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 15:53 我要评论(0)

文章给您介绍在使用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;

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...