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

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

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

    2016年4月14日,是科比正式告别篮球的最后一场球赛.大家都在忙着各种纪念和怀念着看科比打球的青葱岁月.不过已经完美谢幕.而我们今天要说的是微软的IE6.IE7浏览器.淘宝网和天猫商城正式停止支持I ...

  2. 国人Web前端开发必备干货，一个完美支持IE6在内所有浏览器的CSS框架

    摘要: 企户动CSS框架是一个能够完美支持IE6~7在内的所有浏览器的 HTML&CSS 前端框架!给Web开发提供了自适应宽度的百分比多列网格,以及已语义化和结构化的标题.段落.列表.表格. ...

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

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...

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

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...

  5. CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

    CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...

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

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

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

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  8. 用div漂浮快实现与表单无关的多文件上传功能。

    我项目有这个需求,多文件上传,而且要及时显示到表单上,这样的话就不能与表单相关. 由于我对前端不熟,我就实现了这么一个功能,通过button触发一个div漂浮块,然后多文件上传,之后通过js把文件名显 ...

  9. jQuery 2.0发布，不再支持IE6/7/8

    有时发现jQuery库引用的都对,javascript代码写的也没问题,可是jquery就是出现问题,额--我发现换个jquery库就没问题了,长时间不关注jquery的问题而已: 很多人都没有使用最 ...

随机推荐

  1. 【收藏】史上最全的浏览器 CSS & JS Hack 手册

    浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向 ...

  2. Word转html并移植到web项目

    1.打开对应word文件 建议使用web视图查看文档 这样可以提前预览转转成html样式 2.如果有图片修改图片大小及格式 在web视图下,把图片调制适当大小,不然导出的html可能图片较小 3.点击 ...

  3. TP框架中同时使用“or”和“and”

    今天在tp中遇到一个问题,可能这并不算难的问题,但是我还是分享一下 以下是tp手册里面查询or的方式 $User = M("User"); // 实例化User对象 $where[ ...

  4. (十九)python 3 内嵌函数和闭包

    内嵌函数:函数里又嵌套一个函数 def fun1(): print('fun1()在被调用') def fun2(): print('fun2()在被调用') fun2() 闭包: 闭包是函数里面嵌套 ...

  5. Centos 虚拟机 和宿主机 文件共享

    我虚拟机下安装的是一个命令行式的centos ,想要把虚拟机里面的源文件移到宿主机上.于是我就想着搞一个文件共享. 网上有很多办法,比如Samba .ftp之类的.我选择了vmware自带的文件共享功 ...

  6. python接口自动化-发xml格式post请求

    前言 post请求相对于get请求多一个body部分,body部分常见的数据类型有以下四种(注意是常见的,并不是只有4种) application/x-www-form-urlencoded appl ...

  7. Jmeter接口测试实战-Cookies

    场景: 接口测试时常都需要登录,请求方式(post), 登录常用的方法有通过获取token, 获取session, 获取cookie, 等等. 这几种都有一个共同的特点, 有效期(expires). ...

  8. ERP类系统设计学习

    文章:分布式.服务化的ERP系统架构设计 文章的方法是对系统进行拆分,拆分成多个子系统.

  9. oracle如何向空表中添加一个类型为clob的非空列

    一般的添加非空列的步骤是:先add可以为空的列,然后update该列为一个值(比如0),最后modify该列的类型 但是遇到类型为clob的就不行了.在modify这步时报错:ORA-22296:in ...

  10. apache kafka系列之server.properties配置文件参数说明

    每个kafka broker中配置文件server.properties默认必须配置的属性如下: broker.id=0num.network.threads=2num.io.threads=8soc ...