小编Jon*_*ius的帖子

跟随滚动的侧边栏,但如果比视口高,则滚动自身

(嘿,来自长期潜伏者的第一篇文章:)

我已经构建了一个简单的侧边栏,可以将" 绝对到固定 "的技巧留在屏幕上,但是想要考虑侧边栏高于视口的帐户场景.

所以我提出了这个想法.一切都从上面开始:

  • 在页面加载时,侧边栏在起始位置绘制,距视口顶部一定距离.
  • 当用户滚动页面时,侧边栏随内容移动
  • 如果侧边栏垂直适合视口,则会固定到顶部

但在这里它变得更有活力:

  • 如果侧边栏比视口高,它会继续滚动内容,直到到达侧边栏的底部,并在那里修复.侧边栏的顶部滚动到视口顶部之外.

  • 当用户向页面顶部滚动时,侧边栏随内容一起移动,直到到达侧边栏的顶部,并在那里修复.侧边栏的底部滚动到视口底部之外.

通过这种方式,侧边栏像往常一样对滚动作出反应,同时在足够近的地方粘贴以查找长页面.

任何指向示例的指针,或jQuery友好的代码片段/指南都将非常感激.

javascript css jquery

28
推荐指数
2
解决办法
1万
查看次数

标签 统计

css ×1

javascript ×1

jquery ×1