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. c/s端测试——nw.js篇（selenium工具）

    最近在为兄弟部门开发自动化测试工具. 然后才知道现在竟然有JS工具可以把JS打包成cs端程序了,太牛了,js发展是真快.并且还是跨平台的,mac.windows.linux都支持. 当然,今天不是说n ...

  2. upupoo(网页壁纸)自主修改一：农历

    最近在使用一款upupoo的壁纸软件,感觉还可以,主要是对其中html可设置为壁纸方面情有独钟 前几天在它的网页区发现了一个壁纸,感觉挺好: 感觉内容有点少,今天在工作空余时间就在其中加上了农历,同时 ...

  3. spring注解开发-扩展原理（源码）

    1.BeanFactoryPostProcessor BeanPostProcessor:bean后置处理器,bean创建对象初始化前后进行拦截工作的; BeanFactoryPostProcesso ...

  4. 条款27：尽量少做转型动作（Minimize casting）

    NOTE : 1.如果可以,尽量避免转型,特别是在注重效率的代码中避免dynamic_casts. 如果有个设计需要转型动作,试着发展无需转型的替代设计. 2.如果转型是必须要的,试着将它隐藏于某个函 ...

  5. day22 01 初识面向对象----简单的人狗大战小游戏

    day22 01 初识面向对象----简单的人狗大战小游戏 假设有一个简单的小游戏:人狗大战   怎样用代码去实现呢? 首先得有任何狗这两个角色,并且每个角色都有他们自己的一些属性,比如任务名字nam ...

  6. SolrCloud 概念

    原文链接 https://www.w3cschool.cn/solr_doc 当您的集合对于一个节点来说太大时,您可以通过创建多个分片将其分解并分段存储. 碎片是集合的逻辑分区,包含集合中的文档的子集 ...

  7. 单机安装hadoop集群

    一 .安装前准备 1.VMware虚拟内容 2.Linux系统 (CentOS-6.9-min) 镜像文件http://vault.centos.org/ 3.jdk 1.8 rpm或bin文件 ht ...

  8. mysql数据库中的索引有那些、有什么用

    本文主要讲述了如何加速动态网站的MySQL索引分析和优化. 一.什么是索引? 索引用来快速地寻找那些具有特定值的记录,所有MySQL索引都以B-树的形式保存.如果没有索引,执行查询时MySQL必须从第 ...

  9. 【01】魔芋使用MDN的一点点经验

    [01]魔芋使用MDN的一点点经验     1,MDN地址: https://developer.mozilla.org/en-US/(下图)   2,建议看英文原文.因为中文翻译落后,并且有些翻译并 ...

  10. HTML+CSS 制作HTML5标志图

    效果图如下:(是用代码写的,而不是图片!) 网上看到的代码. 看了下,就是CSS的transform属性的应用.加上定位等.组合在一起形成图片. 没什么难点,就是width,left等数据得根据HTM ...