IE6下fixed失效的解决方法
生活随笔
收集整理的這篇文章主要介紹了
IE6下fixed失效的解决方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在網上找了好久,終于找到一種親測有效的解決方法。
<!--[if IE 6]> <script type="text/javascript"> (function($) { jQuery.fn.Fixed = function(options) { var defaults = {x:0, y:0 }; var o = jQuery.extend(defaults, options); var isIe6 = !window.XMLHttpRequest;var html= $('html'); if (isIe6 && html.css('backgroundAttachment') !== 'fixed') { //防止抖動 html.css('backgroundAttachment','fixed').css('backgroundImage','url(about:blank)');};return this.each(function() { var domThis=$(this)[0]; var objThis=$(this); if(isIe6){objThis.css('position' , 'absolute');domThis.style.setExpression('left', 'eval((document.documentElement).scrollLeft + ' + o.x + ') + "px"'); domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + o.y + ') + "px"'); } else { objThis.css('position' , 'fixed').css('top',o.y).css('left',o.x); }}); }; })(jQuery) </script> <![endif]-->調用方法如下:
<!--[if IE 6]> <script type="text/javascript"> $(function(){ $('.float').Fixed({x:800,y:200}); }); </script> <![endif]-->fixed一般應用有兩種情況。
一,居中的彈層:
<!--[if IE 6]> <script type="text/javascript"> $(function(){ //centerX和centerY是可視窗口的高和寬,需要減去自身的的寬度或高度的一半才能居中 var screenHeight=document.documentElement.clientHeight,screenWidth=document.documentElement.clientWidth,floatHeight=$('.float').height(),floatWidth=$('.float').width();$('.float').Fixed({x:(screenWidth-floatWidth)/2,y:(screenHeight-floatHeight)/2 }); }); </script> <![endif]-->二,靠右的彈層,類似于回到頂部等:
<!--[if IE 6]> <script type="text/javascript"> $(function(){ //centerX和centerY是可視窗口的高和寬,高度自定義,寬度為屏幕寬度-浮層寬度 var screenHeight=document.documentElement.clientHeight,screenWidth=document.documentElement.clientWidth,floatHeight=$('.float').height(),floatWidth=$('.float').width();$('.float').Fixed({x:screenWidth-floatWidth,y:300}); }); </script> <![endif]-->這下就妥妥的了。
轉載于:https://www.cnblogs.com/xiaoyouzi/p/3919249.html
總結
以上是生活随笔為你收集整理的IE6下fixed失效的解决方法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 《C++ Primer 4th》读书笔记
- 下一篇: 支付交易一般性准则