<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>岁月如歌 &#187; fixed</title>
	<atom:link href="http://lifesinger.org/blog/tag/fixed/feed/" rel="self" type="application/rss+xml" />
	<link>http://lifesinger.org/blog</link>
	<description>关注用户体验、前端开发，记录生活点滴、岁月足迹。</description>
	<lastBuildDate>Mon, 06 Sep 2010 15:05:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>fixed 定位在 IE6 下的实现技巧一则</title>
		<link>http://lifesinger.org/blog/2009/07/ie6-fixed-position/</link>
		<comments>http://lifesinger.org/blog/2009/07/ie6-fixed-position/#comments</comments>
		<pubDate>Thu, 09 Jul 2009 09:08:50 +0000</pubDate>
		<dc:creator>lifesinger</dc:creator>
				<category><![CDATA[开发]]></category>
		<category><![CDATA[fixed]]></category>
		<category><![CDATA[Hack]]></category>
		<category><![CDATA[ie6]]></category>

		<guid isPermaLink="false">http://lifesinger.org/blog/?p=1951</guid>
		<description><![CDATA[从蓝色理想看到这贴：固定在右下角的离奇方法 受上面帖子的启发，也做了一个demo：ie6_fixed_position.html 代码： &#60;div id="a" style="width: 300px; height: 100px; background: red"&#62;test&#60;/div&#62; &#60;script&#62; var ie6 = !window.XMLHttpRequest; var a = document.getElementById('a'); a.style.position = ie6 ? 'absolute' : 'fixed'; a.style.right = 0; a.style.bottom = 0; if (ie6) { window.onscroll = function() { a.className = a.className; }; } &#60;/script&#62; 原理分析： position: absolute的元素，直接放在position:static的 body 中时，绝对定位的参考物是 body 的 viewport 部分。这使得元素 [...]]]></description>
			<content:encoded><![CDATA[<p>从蓝色理想看到这贴：<a href="http://bbs.blueidea.com/thread-2938030-1-1.html">固定在右下角的离奇方法</a></p>
<p>受上面帖子的启发，也做了一个demo：<a href="http://lifesinger.org/lab/2009/ie6_fixed_position.html">ie6_fixed_position.html</a></p>
<p>代码：</p>
<pre>
&lt;div id="a" style="width: 300px; height: 100px; background: red"&gt;test&lt;/div&gt;
&lt;script&gt;
    var ie6 = !window.XMLHttpRequest;

    var a = document.getElementById('a');
    a.style.position = ie6 ? 'absolute' : 'fixed';
    a.style.right = 0;
    a.style.bottom = 0;

    if (ie6) {
        window.onscroll = function() {
            a.className = a.className;
        };
    }
&lt;/script&gt;
</pre>
<p>原理分析：</p>
<ol>
<li><code>position: absolute</code>的元素，直接放在<code>position:static</code>的 body 中时，绝对定位的参考物是 body 的 viewport 部分。这使得元素 a 在窗口 resize 时，自动就能准确定位到右下角。注意：body 的 position 不能为 relative 等值，否则失效。</li>
<li>onscroll 时需要特殊处理一下，使得滚动时，也让绝对定位元素 a 的参考物能更新为当前的 viewport. 上面的<code>a.className = a.className</code>就是这样一个 hack: 使得 a 的定位参考物动态更新为当前的 viewport. 类似的 hack 还有<code>a.style.background = 'red'</code>. 这些 hack 会引发 reflow, 但反之不一定，进一步的规律没找到，不过有一个 hack，也就够用了。</li>
</ol>
<p>耐心总结，快乐分享，欢迎讨论。</p>
]]></content:encoded>
			<wfw:commentRss>http://lifesinger.org/blog/2009/07/ie6-fixed-position/feed/</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
	</channel>
</rss>
