元素固定定位,比如:固定在右上角或者是在左下角,主流浏览器下,使用fixed就能实现,但是IE6不支持fixed,于是只能采取其他方法。 目前有两种方式可以实现:

 1、 用JS实现: 右侧距顶部45px固定 

 #box-rb{position: fixed; z-index:999;top:45px;right:0;_position:absolute;*zoom:1;} 

 JS代码:

 if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
     var $ltWrap = $("#box-rb"); var scrollTop = $(window).scrollTop();
    //滚动条顶部偏移 
    var wrapT = scrollTop + 45; $ltWrap.css({ top: wrapT + "px"}); 
    $(window).scroll(function () { 
        var wrapScrollT = wrapT + ($(window).scrollTop() - scrollTop); 
        $ltWrap.css({ top: wrapScrollT + "px" });
 }); 

右侧距底部30px固定

 #box-lb{position: fixed; z-index: 999; bottom: 30px; right: 0;_position:absolute; *zoom:1;} 

JS代码:

 if (navigator.userAgent.indexOf("MSIE 6.0") > 0) { 
    var $rbWrap = $("#box-lb");
    var winH = $(window).height();
    //窗口高 
    var wrapH = $rbWrap.height();
    var scrollTop1 = $(window).scrollTop();
    //滚动条顶部偏移
    var currH = winH - (30 + wrapH);
    $rbWrap.css({ top: currH + "px"});
    $(window).scroll(function () {
        var wrapScrollT1 = currH + ($(window).scrollTop() - scrollTop1);
        $rbWrap.css({ top: wrapScrollT1 + "px" });
    });
 } 

可能用js实现的方式是比较常见的吧,下面说说第二种实现方式:用css实现。 2、用CSS实现: 右侧距顶部45px固定

 #box-rb{position: fixed; z-index: 999;top: 45px; right: 0; _position:absolute;_top:expression(documentElement.scrollTop + 45);overflow:hidden;*zoom:1;} 

右侧距底部30px固定

 #box-lb{position: fixed; z-index: 999; bottom: 30px; right: 0;_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight + 30);overflow:hidden;*zoom:1;} 

扩展点: zoom:1;属性是IE浏览器的专有属性,Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等 总结: 以上方式都可以实现,但是我还不是很明确那种方法相对会更优。

CSS的expression对前端来说,好像不是推荐使用的,但是它实现起来减少了代码量。后面我会继续深入,看看最优的解决方案,当然,如果有人已经有明确的方案,还望分享^_^

转载 https://www.cnblogs.com/shenyulin/articles/4536560.html