吸底效果
function fixedBox(xidi,footer,jianju){ var xidiClass='.'+xidi; var footerClass='.'+footer; var clientHeight=$(window).height(); var xidiHeight=$(xidiClass).height();//吸底div的高度 var footerHeight=$(footerClass).height();//底部div的高度 var aa=clientHeight-xidiHeight; $(xidiClass).addClass('fixed').css('top',aa); var boxUp=$(footerClass)[0].offsetTop-jianju;//jianju指的是底部div与boxUp之间固有的距离 var bb=boxUp+xidiHeight-clientHeight; function judge(){ var dd=$(document).scrollTop(); if(dd>bb){ $(xidiClass).removeClass('fixed').css('top','0px'); $(footerClass).css('margin-top','0px'); }else{ $(xidiClass).addClass('fixed').css('top',aa); $(footerClass).css('margin-top',xidiHeight); } } judge(); $(document).scroll(function(){ judge(); }); }
执行代码:
fixedBox('people-foot',"footer",50)
注意的是
①要在css中设置相应的fixed样式;
②一定要确定准确boxUp的值,也就是吸底元素距离最上册的高度!
③当切换tab时,要注意的是:吸底元素xidi回归到原位置时,底部元素与xidi的上面元素要撑开一段距离,但是切换tab后,该距离没有消失,仍然保留。导致后面切换tab时,底部与上册的距离发生变化,因此有两种方法:
(1)每次tab切换时,将底部div与吸底元素的上部div的距离恢复
(2)每次切换tab时,修改函数fixedBox的第三个参数jianju的值,也就是在原来参数的基础上加上吸底元素的高度。
fixedBox('people-foot',"footer",50+$('.xidi').height());