fixedBox固定div漂浮代码 支持ie6以上大部分浏览器

fixedBox固定div漂浮代码 支持ie6以上大部分浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>fixedBox</title>

<script id="xcore" type="text/javascript" src="http://www.haiqiancun.com/xWidget-0.1/xcore.js"></script>

<style>

*{margin:0px;padding:0px;} body{height:3000px;}

</style>

<script>

$(function() {  $(".fixedBox").each(function() {

var self = $(this);

var id = self.attr("id") || ‘fixedBox_‘ + Math.round(Math.random() * 100000);  self.attr("id", id);

var fb = $("#" + id);

var mt = Math.floor(fb.css("margin-top").substring(2, 0)) || 0;

var cd = $(‘<div style="height:‘ + fb.outerHeight() + ‘px;display:none;‘ + fb.attr("style") + ‘">&nbsp;</div>‘);  fb.after(cd);  fb.css({

‘z-index‘: 999

}).data({

‘top‘: fb.offset().top,

‘left‘: fb.offset().left,

‘width‘:fb.width()

});

$(window).scroll(function() {

var pt = fb.data(‘top‘);

var pl = fb.data(‘left‘);

var w = fb.data(‘width‘);

var st = $(document).scrollTop() - 10;

var h = $(document).height();

if (st > pt || st == pt) {  cd.show();

if ((st + self.outerHeight()) > h) {

self.css({

position: ‘fixed‘,

top: (h - (st + self.outerHeight())),

width:w

});

} else {

self.css({

position: ‘fixed‘,

top: 0 - mt,

width:w

});

}

} else {

cd.hide();

self.css({

position: ‘relative‘,

top: 0,

width:w

});

}

})

})

})

</script>

</span>

</head>

<body>

<div style="width:90%;margin:0px auto;">

<div class="fixedBox" style="width:100%;overflow:hidden;background:#fff; font-size:12px;background:#ccc;">

&lt;script&gt; $(function(){ $(".fixedBox").each(function(){

var self= $(this); var id = self.attr("id")||‘fixedBox_‘+Math.round(Math.random()*100000);

self.attr("id",id); var fb = $("#"+id); var mt = Math.floor(fb.css("margin-top").substring(2,0))||0;

var cd = $(‘&lt;div style="width:100%;height:‘+fb.outerHeight()+‘px;display:none;‘+fb.attr("style")+‘"&gt;&nbsp;&lt;/div&gt;‘);

fb.after(cd); fb.css({‘z-index‘:999}).data({‘top‘:fb.offset().top,‘left‘:fb.offset().left});

$(window).scroll(function(){ var pt = fb.data(‘top‘); var pl = fb.data(‘left‘);

var st = $(document).scrollTop()-10; var h = $(document).height(); if(st>pt||st==pt){

cd.show(); if((st+self.outerHeight())>h){ self.css({position:‘fixed‘,top:(h-(st+self.outerHeight()))});

}else{ self.css({position:‘fixed‘,top:0-mt}); } }else{ cd.hide(); self.css({position:‘relative‘,top:0});

} }) }) }) &lt;/script&gt;

</div>

样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例例

</div>

</body>

</html>

改动了滚动时宽度改变

改动时间2014年06月28日

原文http://www.haiqiancun.com/bbs/bbsPage/20140620170743/0/detail/20130727223854/1

时间： 2024-10-11 09:23:17

fixedBox固定div漂浮代码 支持ie6以上大部分浏览器的相关文章

淘宝天猫网站停止支持IE6、IE7浏览器，你还在用xp吗？

2016年4月14日,是科比正式告别篮球的最后一场球赛.大家都在忙着各种纪念和怀念着看科比打球的青葱岁月.不过已经完美谢幕.而我们今天要说的是微软的IE6.IE7浏览器.淘宝网和天猫商城正式停止支持IE6.IE7浏览器.如果你现在还是xp系统,没有升级你的浏览器的话,那么现在你打开淘宝或者天猫是这样的: (IE6浏览器打开的淘宝网首页界面) (IE6浏览器打开的天猫首页界面) (IE7浏览器打开的淘宝网首页界面) (IE7浏览器打开的天猫首页界面) 当然windows xp用户并不是所有人都没有

DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼（转）

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用height: 100px; IE6 专用_height: 100px; IE6 专用*height: 100px; IE7 专用*+height: 100px; IE7.FF 共用height: 100px !important; 一.CSS HACK1, !important随着IE7对!i

[转载]DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS 兼容 以下两种方法几乎能解决现今所有兼容

DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性(转载的)

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important;一.CSS 兼容 以下两种方法几乎能解决现今所有兼容.

【webQD】☆★之固定DIV不随滚动条滚动

[webQD]☆★之固定DIV不随滚动条滚动 在项目开发中,有的页面的某些按钮,我们是不想让他跟着滚动条滚动的,比如,添加页面,有很长的内容添加,在往下滚动添加的过程中,我们始终想看到保存按钮.OK! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>

让IE6/IE7/IE8浏览器支持CSS3属性

让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件,.htc文件是个脚本文件,我个人以为与js文件属于同一货色,只是呢,貌似htc是Internet Explorer(IE)的私生子,只有IE才认它.htc文件可以用来描述web行为,web行为允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控

html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

【CSS】扁平化，支持IE6的含有方块超级链接的导航栏与含有支持IE8的下拉菜单的导航栏

上次在<[Bootstrap]导航栏navbar在IE8上的缺陷与解决方案>(点击打开链接)给大家推荐过导航栏怎么写, 这次不用任何框架,纯手写CSS,原生态,方便各位改写!请笑纳. 一.首先是含有方块超级链接的导航栏,如下图: 这个东西个人觉得拼接在一些灰色巨幕下面做首页的导航栏不错 或者放在一些标签页上面也是可以的 代码如下: <div style="width:70%; text-align:center; margin-left:auto; margin-right:a

CSS透明背景 不影响文字 支持IE6+Chrome+Firefox+等主流浏览器

你是否也在找ie透明背景的css?很多时候我们网页可能会用到透明的效果,比如一般半透明的白色背景,可能在ie7以上版本没问题,但是现在ie6和ie7的用户非常多,我们不得不考虑,可能出现这种问题时,大家可能更多是用一张半透明图片处理,当然我们的原则是能用代码解决的坚决不用图片,其中缘由就不细细道来.请直接看效果.子曰去哪是使用Windows Virtual PC中Windows XP Mode ie6测试所以可以保证原滋原味支持ie6这个奇葩! 纯css透明背景 效果演示 黑色透明背景白色透明背