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

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

在这里插入图片描述

先附上效果图

在这里插入图片描述

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

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
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值