浮动层固定兼容IE6 position:fixed的最佳解决方案
第一种:css方法
有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固定层CSS代码。如下:
.bottom{bottom:0;position:fixed;height:23px;line-height:23px;width:100%;z-index:999;
_bottom:auto;_width:100%;_position:absolute;
//_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
/* for IE6 ,执行JS语句,documentElement即html对象,clientHeight即可视窗口高度,
offsetHeight即浮动层高度(包括border边框厚度),scrollTop即滚动条滚动过的页面高度 */
需要注意的是:使用以上代码后在ie中你会发现被固定定位的元素在滚动滚动条的时候会闪动,下面给出解决方法:
//body{background:url(notfound)fixed;}
body{
background-image:url(text.txt); /*for IE6,也可以用一张图片URL,是否存在这文件无所谓*/
background-attachment:fixed; /* 这句是关键之一:一定要fixed,不能用scroll */
第二种:css方法
body{margin:0;}
#test{display:block; bottom:3px; right:3px; width:130px; position:fixed;}
/* 以下是写给IE6的 */
* html body{height:100%; overflow-y:auto;}
* html #test{position:absolute; right:18px;}
* html{overflow-x:auto; overflow-y:hidden;}
原理:
1、position定位,如果前面的父元素都没有position的话,那么该position定位元素是相对于html的,
注意!是相对html,而不是body
2、html滚动条隐藏,使用body滚动条overflow:auto模拟html滚动条。
3、body层高度100%,当html不设置height高度的时候,除了IE6外,body处的百分比高度是无效的(这算是利用了IE6的bug吧!)
第三种:jQuery方法
var otop = $("#sub_nav").offset().top;
$(window).scroll(function(){
var scroll_top = parseInt($(window).scrollTop());
if( scroll_top > otop ){
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
$("#sub_nav").css({position:"absolute", top:$(window).scrollTop()+"px"});
}else{
$("#sub_nav").css({position:"fixed", top:"0px"});
}
}else{
$("#sub_nav").css({position:"static", top:""});
}
});
上面的sub_nav是一个层,随着页面向下滚动,当此水平条接触浏览器的上边缘时,水平条独立出来,不跟随滚动条滚动了
第四种:插件方法
jquery插件:任意位置浮动固定层(09-11-05更新插件)
第五种:js函数
<div class="float" id="float"> 我是个腼腆羞涩的浮动层… </div> var $smartFloat = function(elements) {
var position = function(element) {
var top = element.getPosition().y, pos = element.getStyle("position");
window.addEvent("scroll", function() {
var scrolls = this.getScroll().y;
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.setStyles({
position: "fixed",
top: 0
});
} else {
element.setStyles({
top: scrolls
});
}
}else {
element.setStyles({
position: "absolute",
top: top
});
}
});
};
if ($type(elements) === "array") {
return elements.each(function(items) {
position(items);
});
} else if ($type(elements) === "element") {
position(elements);
}
};
//绑定
$smartFloat($("float"));
浮动层固定兼容IE6 position:fixed的最佳解决方案的更多相关文章
- 浮动层-JS兼容IE6
//引用jquery 包/*orderBycat 与 orderBycatHead 双层浮动*/ $(window).scroll(function () { var top = $(window). ...
- 解决IE6下浮动层固定定位的经典方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 解决IE6下固定定位问题 使用position:fixed
IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法. 如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩 ...
- 解决 IE6 position:fixed 固定定位问题
#e_float{ _position:absolute; _bottom:auto; _right:50%; _margin-right:-536px; _top:expression(eval(d ...
- 完美解决 IE6 position:fixed 固定定位问题
关于 position:fixed; 属性 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定. pos ...
- IOS系统不兼容position: fixed;属性的解决方案
position: fixed;属性在IOS系统手机上会有很明显的抖动,解决方式: 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;o ...
- IE6 position:fixed bug hack方式
/* IE6浏览器的特有方法 */ /* 修正IE6振动bug */ * html,* html body{background-image:url(about:blank);background-a ...
- 清除浮动小记,兼容Ie6,7
.clearfix { *zoom:1;} .clearfix:after{clear:both; display:block; height:0; visibility:hidden; line-h ...
- IE6下Png透明最佳解决方案(推荐) Unit PNG Fix
引自:http://www.yeeyan.org/articles/view/98510/67784 网络上解决IE6下Png透明解决方案有很多,例如 IE PNG Fix from TwinHeli ...
随机推荐
- JqueryUI-1
本文在于巩固基础 学习网址:http://jqueryui.com/ 基本概念:jQuery UI[是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画. ...
- Silverlight学习笔记之页面跳转
在进行项目开发的时候,经常遇到页面之间的跳转,包括silverlight之间以及silverlight和html之间的跳转. silverlight之间的页面跳转包含两点: 1.主窗体和子窗体 用户新 ...
- C# 根据年月获得此月第一天和最后一天,并计算工作日
string str = "2015年3月"; ); ); , secondIndex - firstIndex - ); , ); DateTime dt = DateTime. ...
- shell ps1 提示设置
PS1="\[\033[01;37m\]\u\[\033[00m\]@\[\033[01;31m\]localhost \t\[\033[00m\]:\[\033[01;35m\]\w\[\ ...
- smarty 判断变量是否为空
{if $val.title!=""} 这里填写想要输出的内容即可 {/if}
- php redis数据库操作类
<?php namespace iphp\db; use iphp\App; /** * redis操作类 * 说明,任何为false的串,存在redis中都是空串. * 只有在key不存在时, ...
- C语言基础03
1.随机数 :一个范围内随机数字的返回值. 格式为: arc4random() % ( num大值 -num小值 + 1 ) + num小值. int n,i= 0; //控制随机 ...
- [WPF]解决ListView在没有Items时,水平滚动条不出现的问题
转载地址:http://www.cnblogs.com/nankezhishi/archive/2010/03/19/FixListViewNotScrollHeaderBug.html 在上一篇Bl ...
- Android APN配置
APN概念 APN(Access Point Name),即“接入点名称”,用来标识GPRS的业务种类,目前分为两大类:CMWAP(通过GPRS访问WAP业务).CMNET(除了WAP以外的服务目前都 ...
- [置顶] 实习总结3-job hunting(西安工作)
开始整理关于西安top level的IT企业的工作从去年开始实习就慢慢展开了,到了北京之后一直关注的比较密切,因此前前后后也整理了很多.本来不打算那么急着写这一篇的,但是在因为在公司呆着,对于西安的一 ...