吸底效果

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());

相关推荐