ie6 fixed bug的解决方法 (css+js)

针对“ie6 fixed bug的解决方法 (css+js)”这个主题，以下是完整的攻略：

问题背景

在制作网站过程中，我们经常会遇到IE6浏览器下固定定位的元素会出现抖动的情况，这是因为IE6的浏览器对CSS中的position:fixed属性支持不好，需要采用特定的解决方法来解决这个问题。

解决方法

CSS 方法

1. 使用position:absolute替代position:fixed

在IE6浏览器下，我们可以使用position:absolute代替position:fixed，然后监听滚动事件，实时计算出需要固定定位的元素的位置，手动设置其位置即可。

示例代码如下：

#fixed-element {
    position: absolute;
    top: expression(document.documentElement.scrollTop + 'px');
    left: expression(document.documentElement.scrollLeft + 'px');
}

1. 使用CSS hack

CSS hack也是一种解决方法，我们可以为IE6单独写一份CSS，对于需要固定定位的元素，使用如下的CSS hack代码实现固定定位：

#fixed-element {
    position: fixed;
    _position: absolute; /* IE6 hack */
    _top: expression(document.documentElement.scrollTop + 'px'); /* IE6 hack */
    _left: expression(document.documentElement.scrollLeft + 'px'); /* IE6 hack */
}

JS 方法

1. 使用jQuery插件

我们可以使用jQuery插件Fixed.js，它使用了absolute和fixed两种定位方式，自动适应IE6的问题。使用方法如下：

加载jQuery库和Fixed.js插件：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.fixed.js"></script>

然后在需要固定定位的元素上调用Fixed方法即可：

<div id="fixed-element">需要固定定位的元素</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#fixed-element').fixed();
    });
</script>

2. 使用原生JS

我们可以使用原生的JS方法，监听滚动事件，手动设置需要固定定位的元素的位置。

示例代码如下：

```js
var fixedElement = document.getElementById('fixed-element');
if (fixedElement) {
    var position = fixedElement.style.position;
    var top = fixedElement.style.top;
    var left = fixedElement.style.left;
    window.onscroll = function() {
        fixedElement.style.position = 'absolute';
        fixedElement.style.top = document.documentElement.scrollTop + 'px';
        fixedElement.style.left = document.documentElement.scrollLeft + 'px';
    };
}

总结

以上就是针对“ie6 fixed bug的解决方法 (css+js)”这个主题的解决方法攻略，通过上述的方法我们可以在IE6下完美解决固定定位bug的问题。