2013年4月26日

常用浮窗效果 解决IE6下”振动”


固定版一:

  1. .packSide{
  2.     width:50px;height:110px;z-index:999;margin-right:-540px;position:fixed;right:50%;top:40%;
  3.     _position:absolute;_margin-top:170px;
  4.     _top:expression(eval(document.documentElement.scrollTop));
  5. }

980像素的版面,经过准确的折半计算,让浮窗紧贴固定在内容版面的右边

mrgin-right: -(980/2 + 50) px

固定版二:

  1. .packSide{width:50px;height:110px;position:fixed;left:10px;bottom:1%;_position:absolute;
  2.         _top:expression(eval(document.documentElement.scrollTop
  3.         +document.documentElement.clientHeight
  4.         -this.offsetHeight
  5.         -(parseInt(this.currentStyle.marginTop,10)||20)
  6.         -(parseInt(this.currentStyle.marginBottom,10)||0)));
  7. }

通过修改 -(parseInt(this.currentStyle.marginTop,10)||20) 或-(parseInt(this.currentStyle.marginBottom,10)||0)  || 后面的值可以修改在IE6下的位置

固定版三:

  1. .packSide{width:50px;height:110px;z-index:999;position:fixed;left:0px;bottom:150px;_position:absolute;
  2. _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop);
  3. }

固定版四:

  1. .packSide{width:50px;height:110px;z-index:999;position:fixed;top:10px;right:10px;}
  2. *html .packSide{_position:absolute;
  3.     _right:expression(eval(document.documentElement.scrollRight+10));
  4.     _top:expression(eval(document.documentElement.scrollTop+10));
  5. }

滚动版

  1. #SideBox{width:75px;height:200px;position:absolute;top:100px;rightright:50%;margin-right:-660px;}
  1. <script type=“text/javascript”>
  2.     $(document).ready(function(){
  3.         var s=$(‘#SideBox’).offset().top;
  4.         $(window).scroll(function(){$(“#SideBox”).animate({top:$(window).scrollTop()+s+“px”},{queue:false,duration:500})});
  5.         $body=(window.opera)?(document.compatMode==“CSS1Compat”?$(‘html’):$(‘body’)):$(‘html,body’);
  6.         $(‘.BackTop’).click(function(){$body.animate({scrollTop:’0px’},400)});
  7. });
  8. </script>

解决IE6下浮窗“振动”bug

  1. * html,* html body{background-image:url(about:blank);background-attachment:fixed;}

标签:,

微信扫一扫二维码访问