首先判断是否到达需要让他开始吸住,即“整个页面”的显示高度,要超过他本身的top值。
这个“整个页面”的显示高度是=窗口的高度+滚动条的上部高度:
$(window).height()+$(window).scrollTop()
元素自身的top值是:$("element").offset().top;
然后如果不采用fixed定位,需要让他的absolute定位始终在底部,该位置应该是“整个页面”的显示高度-他自己的高度。
所以完整代码是
//Resize resize(); $(window).bind('resize',function(){ resize(); }); $(window).bind('scroll',function(){ resize(); }); function resize(){ var height=//元素高度; var _top=$("element").offset().top; if($(window).height()+$(window).scrollTop()>_top){ $("element").css({top:$(window).height()+$(window).scrollTop()-height+"px"}); } else{ //如果上面是用position:fixed,bottom:0的话呢,这里就还原成position:relative或者static } }
上面这种是一直兼容到IE6,缺点是吸住很不流畅,会闪烁。稍微考究一点的判断:
function fixedBar(){ var _bar=$("element").height(); var height=元素高度; if($(window).height()+$(this).scrollTop()<=document.body.clientHeight-height){ if(_isFirst){ document.getElementById("element").style.position="fixed"; } }else{ _isFirst=true; if($(this).scrollTop()>=document.body.clientHeight-bottomHeight-$(window).height()+_bar){ document.getElementById("element").style.position="relative"; } } }
区别就在于红色的那句,不再使用offset.top值,而采用body高度减去元素自身高度来获取元素top值。
这里的_isFirst
为全局变量var _isFirst=false;
用来区分两种状态。