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

js展示:

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

html效果:

 1        <div class="cartFooter">
 2                 <div class="cartWidth clearfix">
 3                     <div class="pull-left">
 4                         <label class="point"><input type="checkbox"/>全选</label>
 5                         <a href="#">删除选中的商品</a>
 6                     </div>
 7                     <div class="pull-right">
 8                         <span>已选中<i class="orangeRed">ddd</i>件服务</span>
 9                         <span>总价：<i class="orangeRed">¥ddd</i></span>
10                         <input type="button" value="去结算" class="settLement" />
11                     </div>
12                 </div>
13             </div>

主要css效果:

 1 /*正常的css*/
 2 .cartFooter{
 3     border:1px solid #ddd;
 4     background:#fff;
 5     color:#333;
 6     height:50px;
 7     line-height:50px;
 8     padding:0 0 0 15px;
 9     margin:20px 0;
10     z-index:10;
11 }
12 .cartFooter a{
13     color:#333;
14 }
15 /*浮动效果*/
16 .cartFixed{
17     position:fixed;
18     bottom:0;
19     left:0;
20     width:100%;
21     background:#fff;
22     box-shadow:0 -1px 8px rgba(0,1,1,.08);
23     margin:0;
24 }
25 .cartFixed .cartWidth{
26     width:1220px;
27     margin:0 auto;
28 }
29 .cartFixed .settLement{
30     line-height: 50px;
31     height: 50px;
32 }