近来发现亚马逊网站的书内容介绍使用了position:sticky; (或者用js自己控制scroll实现?),我注意到windows phone的音乐播放原来也是这么做的(按作者有个字母A-Z的一级导航)
这个UI的主要核心思想是:1级分类导航,当导航目录项scroll到屏幕最顶上时,就暂时固定住,这时scroll的内容就是这个目录下的内容,直到此目录内容全部显示完毕后,才会整体向下滚动
这个UI的主要核心思想是:1级分类导航,当导航目录项scroll到屏幕最顶上时,就暂时固定住,这时scroll的内容就是这个目录下的内容,直到此目录内容全部显示完毕后,才会整体向下滚动
position:sticky;的一个问题就是,内部的垂直scroll时,原来整个网页上面的内容是看不到的,用户相当于进入了一个局部锁定的context中
好处就是,局部的内容垂直方向上有个更大的scroll空间;注意,这跟水平scroll是2种不同的风格,后者一般只用于图片swipe场景
顺带说一下,亚马逊网站的书内容介绍一开始在Mac Chrome下没办法scroll,这种问题我都很想报个bug(Amazon显然应该对用户使用的所有终端都做测试的!),但找不到链接地址,不过最近他们解决了这个bug。