由position: sticky; 想到的

 近来发现亚马逊网站的书内容介绍使用了position:sticky; (或者用js自己控制scroll实现?),我注意到windows phone的音乐播放原来也是这么做的(按作者有个字母A-Z的一级导航)

这个UI的主要核心思想是:1级分类导航,当导航目录项scroll到屏幕最顶上时,就暂时固定住,这时scroll的内容就是这个目录下的内容,直到此目录内容全部显示完毕后,才会整体向下滚动

position:sticky;的一个问题就是,内部的垂直scroll时,原来整个网页上面的内容是看不到的,用户相当于进入了一个局部锁定的context中

好处就是,局部的内容垂直方向上有个更大的scroll空间;注意,这跟水平scroll是2种不同的风格,后者一般只用于图片swipe场景

顺带说一下,亚马逊网站的书内容介绍一开始在Mac Chrome下没办法scroll,这种问题我都很想报个bug(Amazon显然应该对用户使用的所有终端都做测试的!),但找不到链接地址,不过最近他们解决了这个bug。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值