应用场景:假如有两栏布局,总高度都高于浏览器高度,然后左侧更高,这时滚动浏览器窗口的滚动条,当右边栏显示完全时,右边栏开始固定,左边栏可以继续滚动。
技术实现关键点:
- css position fixed(脱离滚动流)
- 监听window上的滚动事件
- 设置fixed的条件判断:滚动高度+屏幕高度>右边栏高度;top设置成-(右边栏高度-窗口高度)。
js实现:
jq实现:
应用场景:假如有两栏布局,总高度都高于浏览器高度,然后左侧更高,这时滚动浏览器窗口的滚动条,当右边栏显示完全时,右边栏开始固定,左边栏可以继续滚动。
技术实现关键点:
js实现:
jq实现: