第一种:使用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等