您的位置:首页 > Web前端 > JQuery

滚动fixed定位插件 ,依赖jquery

2013-12-09 15:17 369 查看
滚动fixed定位插件 ,依赖jquery

//fix固定定位
function Fixed(moveObj,relativeObj){
    /*参数说明
     * @moveObj  object 要移动的对象  --最好完整的结构
     * @relativeObj  object 移动时的相对对象 --最好是最外层的容器
     */
     if($(moveObj).height()<$(relativeObj).height()){
     	var _top=$(moveObj).offset().top;
         var limitTop=$(relativeObj).offset().top + $(relativeObj).height()- $(moveObj).height();
         var diffHeight=$(relativeObj).height()-$(moveObj).height(); //需要移动的对象高度小于相对对象的高度
         $(window).scroll(function(){
             if ( $(window).scrollTop() > _top && limitTop>=0 && diffHeight>=0 ) {//如果滚动的高度大于 moveObj的上边距 就移动
                 $(moveObj).css({'position':'fixed','top':'0px'})
             }
             else{//如果滚动的高度不大于 moveObj就不动
                 $(moveObj).css({'position':'absolute','top':_top+'px'})
             }
             if($(window).scrollTop()> limitTop && limitTop>=0 && diffHeight>=0 ){//限定最大的scroll高度
                 $(moveObj).css({'position':'absolute','top':$(window).scrollTop()-($(window).scrollTop()-limitTop)+'px'})
             }
         })
     }
}


修正版本2

function Fixed(moveObj,relativeObj){
	var offset_top=$(moveObj).offset().top;
	var offset_left=$(moveObj).offset().left;
	var relative_left=$(moveObj).position().left;
	var limitTop=$(relativeObj).offset().top + $(relativeObj).outerHeight()- $(moveObj).outerHeight();
  	$(window).scroll(function(){
  		var top=$(window).scrollTop();
  		if($(window).scrollTop() > offset_top){
  			$(moveObj).css({'position':'fixed','top':'0px','left':offset_left+'px','zIndex':'1'});
  		}else{//如果滚动的高度不大于 moveObj就不动
            $(moveObj).removeAttr('style');
        } 
        if($(window).scrollTop()> limitTop && limitTop>=0 ){//限定最大的scroll高度
            $(moveObj).css({'position':'absolute','top':limitTop-offset_top+'px','left':relative_left+'px'})
        }
  		
  	}) 
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: