Apple 产品页头部固定技术

2016-04-24 22:17:59 +08:00
 jame

使用 iPhone 浏览产品页时， logo 下面那行在滚动后固定定位，而且很顺滑，这是怎么做到的？求教。

产品页链接： http://www.apple.com/cn/iphone-6s/

1980 次点击
所在节点    前端开发
6 条回复
atan
2016-04-24 22:43:10 +08:00
http://stickyjs.com
levon
2016-04-24 22:49:37 +08:00
我觉得比较人性化的做法是当你要往上滚的时候，头部才显示出来。
audi
2016-04-24 22:57:28 +08:00
页面中的 iPhone 模型才顺滑
jame
2016-04-24 23:08:44 +08:00
@atan 这个不支持手机。
@levon 同感。
atan
2016-04-24 23:16:43 +08:00
看了下样式，他用了 position:sticky 这个 css3 属性，因此比较流畅，但是目前只有 firefox 和 safari 支持，所以 chrome ， IE 下还是需要 JS 完成，效果就没这么好了
jame
2016-04-24 23:46:24 +08:00
@atan 看到，谢谢。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/274110

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX