解决CSS position:fixed 兼容问题

CSS中的position:fixed属性用于将元素固定在浏览器窗口的某个位置，无论滚动条如何滚动，该元素都会保持不变。但是，该属性在不同的浏览器中有不同的兼容性问题，下面介绍几种解决方法。

1. IE6兼容问题

IE6不支持position:fixed属性，可以使用position:absolute加javascript实现。

<style>
#fixedDiv {
    position: absolute;
    right: 0;
    bottom: 0;
}
</style>
<script>
window.onscroll = function() {
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    document.getElementById("fixedDiv").style.top = (top + document.documentElement.clientHeight - document.getElementById("fixedDiv").offsetHeight) + "px";
}
</script>
<div id="fixedDiv">我是fixed元素</div>

2. 其他浏览器兼容问题

其他浏览器中，position:fixed属性很好用，但是如果在某些情况下，fixed元素的父元素设置了transform属性，会导致fixed元素表现异常。可以使用position:sticky属性代替。

<style>
#fixedDiv {
    position: sticky;
    position: -webkit-sticky; /* Safari */
    top: 0;
    background: #fff;
}
</style>
<div id="fixedDiv">我是fixed元素</div>

另外，还可以使用JavaScript来实现fixed效果，但是需要考虑到性能问题。