medium.com 这个页面是如何实现的？

[eteled]

今天看到此页面 https://medium.com/s/not-another-first-time-story

有点心动。自己动手，发现太菜，不能实现。

左侧的图片“相对”是固定的，左侧滚动它不动；当左侧的列表滚动到底时，带起的 footer 竟也把左侧不动的图片带动起来了。请教各位这是如何实现的？

[youweiks]

左侧先 fixed 定位，然后监控页面滚动，当滚动到一定位置的时候，用 js 将左侧改为其他定位

[eteled]

@youweiks 说到 js，那我就沉默了。

[WittBulter]

google 云的文档和这个差不多，也是 js 实现的， 你也可以参考一下。

[eteled]

@WittBulter 你说的是 https://cloud.google.com/interconnect/docs/how-to/carrier-peering?hl=zh-cn 这个吗，并不一样啊。

[WittBulter]

@eteled 拉到底的时候控制了一下 footer，遮住左侧。
原理差不多，都是检查一下到底了没然后触发一个 action 嘛

[hgc81538]

純 CSS position: sticky 可實現
參考: https://dev.to/claireparkerjones/how-to-make-a-sticky-sidebar-with-two-lines-of-css-2ki7

或許用 plugin: https://abouolia.github.io/sticky-sidebar/

[eteled]

@hgc81538 简直太棒了！感谢！