吸底效果

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