實現代碼:
. 代碼如下:
<script type="text/javascript">
var rollSet = $('#widget');
var offset = rollSet.offset();
var fwidth = $("#footer").height();
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var scrollBtm = $(document).height() - $(window).scrollTop() - $("#widget").height();
if (offset.top < scrollTop) {
if (scrollBtm > fwidth) {
rollSet.removeClass('absolute').addClass('fixed')
} else {
rollSet.removeClass('fixed').addClass('absolute')
}
} else {
rollSet.removeClass('fixed')
}
})
</script>
方法說明:
由頁面總高度減去已滾動的高度再減去ID為widget的層的高度即等於該層底部距離底部的高度;
當距離底部的高度小於或等於特定位置距離底部的高度時,去掉樣式fixed,然後給該層添加絕對定位!
CSS中要給父父層添加position:relative;