关于airbnb的左侧选单？

Question

https://www.airbnb.com/experi...

左侧那个区块
当往下 scroll 时，左侧的图会跟着萤幕卡住

直到下面那条线时就停止在原地

往回也是一樣原理⋯⋯
這到底是咋做的啊？ ！

Answer 1

其实就是简单的利用了css的position属性。
平时那个div区块是position属性是absolute，此时的元素定位是相对于父节点的。
如果滚动页面就会触发scroll事件，当距离大到一定时候就把此元素的position属性设置为fixed，再配合top: 80px 类似样式就是把此div放到距离可视窗口顶部80像素的位置，不在随滚动而移动。反向滚动则相反。
至于滚动到一定距离停住效果就是把fixed取消设置一个合适的top就会停在滚动的地方。

Answer 2

具体就是监听页面滚动事件, 然后根据该元素距离页面顶部的偏移量, 改变其定位的方式
position: absolute => position: fixed

Answer 3

这跟segmentfault文章详情中目录是一样的效果。具体实现参考我的项目

scrollAD: _throttle((that, args = []) => {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  that.isTop = scrollTop > 40
}, 30) 我使用了节流函数