应用场景:假如有两栏布局,总高度都高于浏览器高度,然后左侧更高,这时滚动浏览器窗口的滚动条,当右边栏显示完全时,右边栏开始固定,左边栏可以继续滚动。

技术实现关键点:

  • css position fixed(脱离滚动流)
  • 监听window上的滚动事件
  • 设置fixed的条件判断:滚动高度+屏幕高度>右边栏高度;top设置成-(右边栏高度-窗口高度)。

js实现:

固定边栏滚动特效

固定边栏滚动特效

 

jq实现:

固定边栏滚动特效

 

相关文章: