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") + '"> </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;">
<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="width:100%;height:'+fb.outerHeight()+'px;display:none;'+fb.attr("style")+'"> </div>');
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});
} }) }) }) </script>
</div>
样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例例
</div>
</body>
</html>
改动了滚动时宽度改变
改动时间2014年06月28日
原文http://www.haiqiancun.com/bbs/bbsPage/20140620170743/0/detail/20130727223854/1
fixedBox固定div漂浮代码 支持ie6以上大部分浏览器的更多相关文章
- 淘宝天猫网站停止支持IE6、IE7浏览器,你还在用xp吗?
2016年4月14日,是科比正式告别篮球的最后一场球赛.大家都在忙着各种纪念和怀念着看科比打球的青葱岁月.不过已经完美谢幕.而我们今天要说的是微软的IE6.IE7浏览器.淘宝网和天猫商城正式停止支持I ...
- 国人Web前端开发必备干货,一个完美支持IE6在内所有浏览器的CSS框架
摘要: 企户动CSS框架是一个能够完美支持IE6~7在内的所有浏览器的 HTML&CSS 前端框架!给Web开发提供了自适应宽度的百分比多列网格,以及已语义化和结构化的标题.段落.列表.表格. ...
- DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性(转载的)
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...
- [转载]DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...
- CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8
CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...
- 让IE6/IE7/IE8浏览器支持CSS3属性
让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- 用div漂浮快实现与表单无关的多文件上传功能。
我项目有这个需求,多文件上传,而且要及时显示到表单上,这样的话就不能与表单相关. 由于我对前端不熟,我就实现了这么一个功能,通过button触发一个div漂浮块,然后多文件上传,之后通过js把文件名显 ...
- jQuery 2.0发布,不再支持IE6/7/8
有时发现jQuery库引用的都对,javascript代码写的也没问题,可是jquery就是出现问题,额--我发现换个jquery库就没问题了,长时间不关注jquery的问题而已: 很多人都没有使用最 ...
随机推荐
- DNS查询过程
DNS查询过程 假设www.abc.com的主机要查询www.xyz.abc.com的服务器ip地址. 知识点 1.hosts文件:以静态映射的方式提供IP地址与主机名的对照表,类似ARP表 2.域: ...
- Linux 之 nano 编辑器的使用
在Linux操作系统中,有很多的文本编辑器,最为重要的就是vi文本编辑器,下面来介绍一个简单的nano文本编辑器.nano的使用简单,我们可以直接加上文件名就能够打开一个旧文件或新文件,我们可以打开一 ...
- CSS3---渲染属性
1.计数器 CSS3计数器( CSS Counters )可以允许我们使用css对页面中的任意元素进行计数,实现类似于有序列表的功能.与有序列表相比,它的突出特性在于可以对任意元素计数,同时实现个性化 ...
- 前端基础之JavaScript_1
摘要: JavaScript简介 引入方式 语言规范 JavaScript语言基础 变量声明 数据类型 运算符 流程控制 函数 词法分析 内置对象 一.JavaScript概述 1.ECMAScrip ...
- POJ 1511 Invitation Cards (最短路的两种方法spfa, Dij)
题意: 给定n个点, m条路, 求1到 2 ~n的最短路之和加上2~n到1的最短路之和 分析: 裸最短路, 求其他点到源点的距离只需要把边方向再从源点求一次即可 spfa代码 #include< ...
- SpringMVC修改功能
articleList.jsp <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" ...
- python request包使用指西
request是Python的一个网络模块包,使用它可以快速写一些强大的爬虫脚本
- xtu read problem training 3 B - Gears
Gears Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on ZJU. Original ID: 3789 ...
- python--如何在线上环境优雅的修改配置文件?
1.如何在线上环境优雅的修改配置文件? 原配置文件 #原配置文件 global log 127.0.0.1 local2 daemon maxconn 256 log 127.0.0.1 local2 ...
- 推荐一个 Java 实体映射工具 MapStruct
声明: 1.DO(业务实体对象),DTO(数据传输对象). 2.我的代码中用到了 Lombok ,不了解的可以自行了解一下,了解的忽略这条就好. 在一个成熟的工程中,尤其是现在的分布式系统中,应用与应 ...