HTML:固定元素在屏幕某个位置,随水平滚动而移动

目的
设置分页元素的距离右侧始终是 11px。不管水平滚动条怎么移动,都是 11px。
效果
这里写图片描述

思考1
可以使用表格的滚动事件。
每次移动都是相对最初位置计算的,所以只有右移。
取得水平滚动位置 a,计算 a-11 得到分页元素要右移的距离 b,相对的分页元素的右边距应为 -b。
效果1
基本察觉不出分页元素有移动痕迹。
这里写图片描述

思考2
通过计时器来实现。
每次移动都是相对上一次位置计算的,所以分左右移动两种情况。
条件:右边距是正数时,元素左移;负数时,元素右移。
静止:
可视区域宽度 = 距离可视区域左边(x) + 元素宽度(y) + 11
右移(相对静止):
可视区域宽度 = x(变小了)+ 移动距离(多出的)+ y(不变)+ 11
右边距(新)= 右边距(旧)- 移动距离
左移(相对静止):
可视区域宽度 = x(变大了)- 移动距离(多出的)+ y(不变)+ 11
右边距(新)= 右边距(旧)+ 移动距离
效果2
明显看出分页元素有移动。【体验较差】
这里写图片描述

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值