仿淘宝购物车实现功能：滚动页面到【结算操作】不可视时，浏览器底部出现固定栏

最近在做一个电商平台，做到购物车的时候，就脑洞大开要模仿淘宝实现一个非常人性化的用户体验性效果。觉得很不错，非常好玩就很大家分享了。

先附上效果图

实现的效果就是这个小东西，哈哈

1、整个页面结算操作不可视情况：

这时候结算按钮操作是不可视的，即用户没有看到，就会出现底部栏了。

当用户滚到底部，看到结算栏的时候，底部栏就消失了：

2、整个页面不可视结算栏情况：

这时候是不会出现底部栏的

实现思路：

首先要判断

的位置，什么时候可视，什么时候不可视，通过这样分析，用户通过滚动页面来控制底部栏的显示或隐藏

代码：

<!--操作按钮-->
<div class="cart_operating clearfix">
	<div class="cart_operating_style">
          <div class="cart_price">商品总价：（不含运费）<b>￥0.00</b></div>
          <div class="cart_btn">
                 <a href="javascript:void(0);" class="payment_btn">
                 	<div class="paymentAllowed">马上付款</div></a>
                 <a href="#" class="continue_btn"></a>
          </div>
    </div>
</div>
<!-- 浮现栏 -->
<div class="floatTitle" style="border: 1px gainsboro solid;height: 50px;line-height: 50px;display: none;width: 1000px;">
       <div style="font-size: 17px;display:inline;float: left">
       		已选商品 
       		<span style="color: red;" id="float_count">0</span> 件
       </div>
      <div class="cart_price" style="display:inline;font-size: 17px;float: 	left;padding-left: 150px;padding-right: 180px;">
                        商品总价：（不含运费）<b style="color: red">￥0.00</b>
      </div>
		<div class="cart_btn" style="display:inline; ">
		   <a href="javascript:void(0);" class="payment_btn">
		   		<div class="paymentAllowed">马上付款</div>
		   	</a>
		   <a href="#" class="continue_btn"></a>
		 </div>
</div>

<script type="text/javascript">
	$(function() {
		$(window).scroll(function () {//鼠标滑动事件
		      var height = $(".cart_btn").offset().top;//计算该框离浏览器顶部的距离
		      if (height >= $(window).scrollTop() && height < ($(window).scrollTop() + 	       $(window).height())) {
		         $(".floatTitle").hide();
		       }else {
		          $(".floatTitle").show();
		        }
		
		 });
		  //跳转到购物车页面加载时候
		  var height = $(".cart_btn").offset().top;//计算该框离浏览器顶部的距离
		  if (height >= $(window).scrollTop() && height < ($(window).scrollTop() +   $(window).height())) {
		      $(".floatTitle").hide();
		   }else {
		      $(".floatTitle").show();
		    }
	});
</script>