兼容IE6的固定浮动的两种方法

第一种:使用margin-top

$(function() {

var $sidebar = $("#sidebar"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});

第二种:使用position:absolute

$(function() {

var $sidebar = $("#sidebar"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().css({"position":"absolute","top":$window.scrollTop()+toPadding});

} else {
$sidebar.css({"position":"static"});

}
});

});

第二种方式还需要父类是相对于body,或者他的父类元素都没有position:relative;这个样式,否则的上面的变现就会出错。

当然实际操作还要更加复杂,使用时还要定义left/height/width等

原创文章:兼容IE6的固定浮动的两种方法 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/ie6-fixed.html)
评论已关闭。