滚动fixed定位插件 ,依赖jquery

滚动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'})
        }
  		
  	}) 
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值