该插件可实现在向下拉动时,保持某个DIV一直固定在顶部
具体实例可看 http://www.ickd.cn/outlets/
$.fn.extend({
scrollFollow:function(settings){
settings=settings||{};
settings.container=settings.container||$(this).parent();
settings.bottomObj=settings.bottomObj||'';
settings.bottomMargin=settings.bottomMargin||0;
settings.marginTop=settings.marginTop||0;
settings.marginBottom=settings.marginBottom||0;
settings.zindex=settings.zindex||9999;
settings.width=settings.width||$(this).width();
var win=$(window);
var target=$(this);
if(target.length<=0 || target.attr('fixed')){
return
}
target.attr('fixed','fixed');
var targetTop=parseInt(target.position().top);
// alert(target.css('borderTopWidth'));
// targetTop+=parseInt(target.css('borderTopWidth'))+parseInt(target.css('marginTop'));//在IE 6下出错
var containerHeight=settings.container.height();
var targetHeight=target.height();
if(containerHeight-target.height()>=100){
//return;
}
//e.container.css('height',i+'px');
var positionValue=target.css("position");
var topValue=target.css('top');
var widthValue=target.css('width');
if(settings.bottomObj==''||$(settings.bottomObj).length<=0){
var hitBottom=false
}//快递查询http://www.ickd.cn
else{
var hitBottom=true
}
win.scroll(function(event){
var th=targetHeight;//targetHeight
var ch=containerHeight;
scrollTop=win.scrollTop();
topPosition=0;
if(hitBottom==true){
var maxTop=$(settings.bottomObj).position().top-settings.marginBottom-settings.marginTop;
topPosition=Math.min(topPosition,(maxTop-scrollTop)-target.outerHeight(true));
}
// $('#demsg').html('scrollTop:'+scrollTop+' targetTop:'+targetTop+' topPosition:'+topPosition+' maxTop:'+maxTop);
if(scrollTop>targetTop-settings.marginTop){
if(window.XMLHttpRequest){
target.css({
position:"fixed",top:topPosition+settings.marginTop,'z-index':settings.zindex,width:settings.width+'px'
});
target.siblings('#fix-placeholder').css({
height:target.height()+'px'
}).show();
}
else{
target.css({
position:"absolute",top:scrollTop+topPosition+settings.marginTop+'px','z-index':settings.zindex
})
}
}
else{
target.css({
position:positionValue,top:topValue,width:widthValue
});
target.siblings('#fix-placeholder').hide();
}
});
return this
}
});
具体实例可看 http://www.ickd.cn/outlets/