边栏，跟随滚动，但滚动自我，如果比视图高

Question

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

我已经构建了一个简单的侧边栏，它可以在屏幕上使用“绝对固定”功能，但是我希望考虑到一些场景，其中边栏高于视图端口。

所以我想出了这个主意。这一切都是从上面开始的：

• 在页面加载时，侧边栏是在起始位置绘制的，距离视图顶部有一段距离。
• 当用户滚动页面时，侧边栏将与内容一起移动。
• 如果侧栏与视口垂直匹配，则将其修复到顶部。

但在这里，它变得更加动态：

• 如果侧边栏比视图端口高，则会继续使用滚动内容，直到到达侧边栏的底部为止，并对其进行修复。侧边栏的顶部滚动到视口上方。
• 当用户回滚到页面顶部时，侧边栏将与内容一起移动，直到到达侧边栏的顶部，并在那里修复。侧边栏的底部滚动到视口底部以外。

这样，侧边栏就会像往常一样滚动，同时保持足够近的距离，在长页上找到。

任何指向示例的指针或jQuery友好的代码片段/指南都将是非常感谢的。

Answer 1

我对一个项目有一个确切的想法，下面是一个如何实现它的例子

http://jsfiddle.net/ryanmaxwell/25QaE/

Answer 2

你想要达到的行为叫做“词缀”。Twitter的Bootstrap前端框架有一个javascript组件，可以实现您想要得到的东西。请查一下关于词缀组件的一节。实际上，在这里您还可以看到所需行为的演示，左侧边栏中的菜单是附加的。

您可以为词缀init调用的偏移量参数定义函数，这样就可以动态地确定何时将元素引脚/取消引脚。要查看上下文中的示例，请检查上面链接页面的来源，特别是查找application.js，它包含左侧可以看到的词缀设置。在这里，您可以看到从上下文中删除的init代码：

// side bar
$('.bs-docs-sidenav').affix({
  offset: {
    top: function () { return $window.width() <= 980 ? 290 : 210 }
  , bottom: 270
  }
})

也可能值得在页面源代码中签入docs.css样式表，其中包含了一些已粘贴元素的定位和样式。检查这可能解决你的问题，或者至少可以给你和想法。

Answer 3

你可以使用Sticky Sidebar https://abouolia.github.io/sticky-sidebar/#examples

您想要“可滚动的Sticky元素”行为参见这里的示例https://abouolia.github.io/sticky-sidebar/examples/scrollable-element.html