支持IE6浏览器的二分栏侧栏空白处添加固定内容的代码

      最近研究了带边框的二分栏等高布局,同时,也发现网型网秀写了一篇分栏布局侧栏空白处添加内容的JS代码,相当有创意,效果也不错,据说是受著名博客 - 月光博客的启发。遗憾的是,这个代码不支持IE6浏览器(月光博客也是如此),即在IE6上,内容无法固定显示在侧栏空白处。经过研究测试,基本解决了支持IE6浏览器的二分栏侧栏空白处添加固定内容的代码,本文做个初步介绍。

     具体效果见右侧栏,请向下拉动流动条,当侧栏出现完全空白时,添加的内容即会出现。作为演示,只是用了张Jimdo的广告图片。

      具体代码请参见网型网秀原文,这里引用一下。

JS代码

<script type="text/javascript">
//<![CDATA[
    window.onscroll = function() {
        var wxwx_scroll = document.getElementById("wxwx_scroll");
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        if (scrollTop > 980) {
    wxwx_scroll.innerHTML = '<a href="http://cn.jimdo.com/%E5%BB%BA%E7%AB%99%E5%A5%97%E9%A4%90/jimdobusiness/#ref=a225086"><img src="http://s.jimdo.com/s/img/aff/ba/2/JimdoBusiness/cn.gif" width="270" height="225"><\/a>';
    wxwx_scroll.style.display = ""
        }
  else {
            wxwx_scroll.style.display = "none"
        }
    }
//]]>
</script>

      棕色部分为图片地址及其链接地址,定义了图片的宽度和高度。这个JS代码,如果全站都用的话,可以放到右侧广告盒下方,也可以放到模板的HTML最下方,建议不要放到“head”部。

CSS代码:

#wxwx_scroll

{

position:fixed;

top:5px;

padding-left:0px;

/* 支持 IE6 的固定定位代码 */

_position: absolute;

_top:expression(eval(document.documentElement.scrollTop+(parseInt(this.currentStyle.marginTop,10)||-170)));

}

      在上述CSS代码中,棕色部分是针对IE6浏览器的固定定位代码,其中“-170”是设置内容在垂直方向上出现的位置,可以根据侧栏的内容实验确定。

HTML(页面)代码

<div id="wxwx_scroll">

</div>

      这个代码放到侧栏广告盒下方。

      如果仅仅用作演示,只在部分页面上使用,上述的JS代码可以放到主栏的最下方,而CSS代码和HTML(页面)代码可以合并起来,如:

<div id="wxwx_scroll" style="position:fixed;top:5px;padding-left:0px;

/* for IE6 */

_position: absolute;

_top:expression(eval(document.documentElement.scrollTop+(parseInt(this.currentStyle.marginTop,10)||-170)));">
</div>

      仅仅使用以上代码的话,拉动流动条时,内容会出现抖动现象,解决的方法是在CSS里添加以下代码:

body {background: url(about:blank); background-attachment: fixed;}

关于IE6固定定位的问题,还可以参阅网上邻居的以下文章:


      支持IE6及其内核浏览器的顶部导航条固定定位的CSS代码
      兼容IE6浏览器的“返回页首或返回顶部”CSS代码

Write a comment

Comments: 1
  • #1

    网型网秀 (Monday, 27 February 2012 15:15)

    不支持此功能的浏览器不是好浏览器,IE6我已经将他摒弃,只要效果不是太差,去研究这种繁琐的代码太为难自己了。
    邻居可算是IE6兼容高手了,哈哈!