网站首页 > 知识剖析 正文
第一种: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,而不是body2、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
});
}
});
};
- 上一篇: css清除浮动 CSS清除浮动的作用
- 下一篇: 「Electron跨平台桌面应用开发 7」自定义窗口
猜你喜欢
- 2024-12-26 css布局方案汇总(28个实例图文并茂)
- 2024-12-26 StackOverflow 2022 年度调查报告
- 2024-12-26 滑动页面时的控件设计规范——吸底&锚点
- 2024-12-26 css精髓:这些布局你都学废了吗? css布局是什么意思
- 2024-12-26 产品必会的30个Axure使用技巧 axure基础知识
- 2024-12-26 微信小程序开发极简入门(四):文件导入
- 2024-12-26 CSS新特性contain,控制页面的重绘与重排
- 2024-12-26 两句css代码实现全屏滚动效果-demo案例
- 2024-12-26 CSS实现溢出显示省略号 html溢出省略号
- 2024-12-26 详解css清除浮动方法 详解css清除浮动方法是什么
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)