欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-22 23:31:34
...

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

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

先附上效果图

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

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

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>
相关标签: 购物车