仿京东实现购物车页面中结算的动态滚动效果

js展示:

<script>
    /*实现结算的动态浮动的效果*/
    $(function () {
        var $top = $(".cartFooter"), wheight = $(window).height(), dheihgt = $(document).height();
        wheight < dheihgt ? $top.addClass("cartFixed") : $top.removeClass("cartFixed");
        $(window).scroll(function () {
            ($(window).scrollTop() >= $(document).height() - $(window).height()) ? $top.removeClass("cartFixed") : $top.addClass("cartFixed");
        })
    })
</script>

html效果:

       <div class="cartFooter">
                <div class="cartWidth clearfix">
                    <div class="pull-left">
                        <label class="point"><input type="checkbox"/>全选</label>
                        <a href="#">删除选中的商品</a>
                    </div>
                    <div class="pull-right">
                        <span>已选中<i class="orangeRed">ddd</i>件服务</span>
                        <span>总价：<i class="orangeRed">¥ddd</i></span>
                        <input type="button" value="去结算" class="settLement" />
                    </div>
                </div>
            </div>

主要css效果:

/*正常的css*/
.cartFooter{
    border:1px solid #ddd;
    background:#fff;
    color:#333;
    height:50px;
    line-height:50px;
    padding:0 0 0 15px;
    margin:20px 0;
    z-index:10;
}
.cartFooter a{
    color:#333;
}
/*浮动效果*/
.cartFixed{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background:#fff;
    box-shadow:0 -1px 8px rgba(0,1,1,.08);
    margin:0;
}
.cartFixed .cartWidth{
    width:1220px;
    margin:0 auto;
}
.cartFixed .settLement{
    line-height: 50px;
    height: 50px;
}