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. docker nginx 负载均衡

    index1.html <html> <head> <title>lb-test</title> </head> <body> ...

  2. RHEL6.5 DHCP服务器搭建

    RHEL6.5 DHCP服务器搭建: DHCP服务器是用来分配给其它客户端IP地址用的,在RHEL 6.5中DHCP服务器搭建方法如下: 第一步,通过yum安装dhcp服务: 命令:yum insta ...

  3. php 后端规范

    后端框架地址: git@gitee.com:xielisen/xcore.git 框架使用规范,内部沟通 Controller命名规范 1, 首字母大写,其余小写 2, 对应数据库名称. 不要下划线 ...

  4. 【51nod 1092】 回文字符串（区间DP）

    回文串是指aba.abba.cccbccc.aaaa这种左右对称的字符串.每个字符串都可以通过向中间添加一些字符,使之变为回文字符串. 例如:abbc 添加2个字符可以变为 acbbca,也可以添加3 ...

  5. 数据结构实验4：C++实现循环队列

    实验4 4.1 实验目的 熟练掌握队列的顺序存储结构和链式存储结构. 熟练掌握队列的有关算法设计,并在循环顺序队列和链队列上实现. 根据具体给定的需求,合理设计并实现相关结构和算法. 4.2 实验要求 ...

  6. JS Enter键跳转 控件获得焦点

    //回车跳转 jQuery(document).ready(function () { //$(':input:text:first').focus(); jQuery(':input:enabled ...

  7. 【转】关于大型网站技术演进的思考（十九）--网站静态化处理—web前端优化—上（11）

    网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属 ...

  8. 潘多拉的盒子（bzoj 1194）

    Description Input 第一行是一个正整数S,表示宝盒上咒语机的个数,(1≤S≤50).文件以下分为S块,每一块描述一个咒语机,按照咒语机0,咒语机1„„咒语机S-1的顺序描述.每一块的格 ...

  9. BZOJ4580: [Usaco2016 Open]248

    n<=248个数字,可以进行这样的操作:将相邻两个相同的数字合并成这个数字+1,求最大能合成多少. f(i,j)--区间i到j能合成的最大值,f(i,j)=max(f(i,k)+1),f(i,k ...

  10. webstorm初始化

    1.皮肤设置,重启后Terminal皮肤生效 2.排除目录 2.1全局排除 2.2局部排除 选中文件夹 右击Make Directroy As 选择 Excluded 3.代码自定义 3.1 cons ...