兼容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等


8 responses on “兼容IE6的固定浮动的两种方法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>