知乎app这种广告效果如何用web实现

Question

先认错，知乎首页是native，市场才是嵌的web，故本问主要讨论如何用web复现该功能。

---

如图紫色区域为广告图，红色区域是窗口（天窗），通过滚动能看到完整的广告图片。
自己想到了2种实现方式

1. 天窗透明，图片下置为背景.这种偏向css
2. 天窗就是图片，通过滚动调整image-position.这种偏向js

感觉这种用户体验很不错
想知道知乎的前端同僚如何实现它的

---

更新

通过安卓开发者模式能看到以下

图1

图2

图3

3图能看到最后“天窗”滚动到顶部时，是连带图片滚动的，故复现的话会偏向第二种方案。

Answer 1

不太清楚知乎的实现，但对于前端来说，可以了解下 background-attachment 这个css属性。

写了一个demo，滚动一下看看是不是这个效果

https://jsfiddle.net/Lvjfohsx/3/

Answer 2

偏js，类似阿里云首页最下面的一个背景条https://www.aliyun.com/
好处在于可做出入视窗优化，另外可以记录当前图层的位置，以便点击展开和关闭还原操作。

Answer 3

其他先不说，你拿一个native的截图问用web的方式怎么实现？

Answer 4

乌鸦说的不对。并不是 background-attachment 这个css属性。我是是昨天看到这个问题，也是有这个需求，然后今天专门注册一个账号回答这个问题的！我在知乎也已经回答过这个问题，只是用那个属性，你仔细看，根本没有达到想要的效果！https://github.com/bozaiOvO/-... 这个是我写的一个视差demo，也挺简单那，但是我看好多人都以为是background-attachment，其实仔细看看，明显不是欸！亲们！我不知道我的那个demo可否满足你的需求，如果不满足，我希望你们可以提出来一起改进，如果满足，那是最好不过了。

Answer 5

对于你这个问题，只能说抱歉，既然你已经知道方向了，就应该想方法去实现它然后再考虑优化。知乎的方法我也不知道，但我想说的是，每个人的思维都不一样，为什么还要知道它的方法，知道它的表现形式不就够了么？