jquery – 粘性侧边栏：向下滚动时向下,向上滚动时向上

我一直在寻找一些时间现在为我的粘性sidebar问题的解决方案。我有一个具体的想法，我想如何行动;有效地，我想它坚持到底部，当你向下滚动，然后一旦你向上滚动，我想它坚持到顶部，流动的运动(没有跳跃)。我无法找到一个我想要实现的例子，所以我创造了一个形象，我希望将说明清楚点：

>侧栏位于标题下方。
>当您向下滚动边栏保持与页面的内容水平，以便您可以滚动边栏和内容。
>到达侧边栏的底部，侧边栏粘到视口的底部(大多数插件只允许粘贴到顶部，一些允许粘贴到底部不允许两者)。
>到达底部，侧栏位于页脚上方。
>当您向上滚动时，边栏与内容保持水平，以便您可以再次滚动内容和侧边栏。
>到达侧边栏的顶部，侧边栏粘到视口的顶部。
>到达顶部，侧边栏位于标题下方。

我希望这是足够的信息。我创建了一个jsfiddle测试任何插件/脚本，我已重置为这个问题：http://jsfiddle.net/jslucas/yr9gV/2/。

非常感谢提前如果有人有我的解决方案。

解决方法

1到非常漂亮和ilustrative图像。

我知道这是一个老问题，但我偶然发现了同样的问题发布在你的forum.jquery.com和一个答案有(通过@ tucker973)，建议一个好的图书馆做这个，并想在这里分享。

它被@leafo称为sticky-kit

> github proyect
> webpage
> simple example in jsFiddle(与附在此处的代码相同的代码)

这里你有一个非常基本的例子的代码，我准备和一个工作演示，看看结果。

/*!
 * Sticky-kit
 * A jQuery plugin for making smart sticky elements
 *
 * Source: http://leafo.net/sticky-kit/
 */

$(function() {
  $(".sidebar").stick_in_parent({
    offset_top: 10
  });
});

* {
  font-size: 10px;
  color: #333;
  Box-sizing: border-Box;
}
.wrapper,.header,.main,.footer {
  padding: 10px;
  position: relative;
}
.wrapper {
  border: 1px solid #333;
  background-color: #f5f5f5;
  padding: 10px;
}
.header {
  background-color: #6289AE;
  margin-bottom: 10px;
  height: 100px;
}
.sidebar {
  position: absolute;
  padding: 10px;
  background-color: #ccc;
  height: 300px;
  width: 100px;
  float: left;
}
.main {
  background-color: #ccc;
  height: 600px;
  margin-left: 110px;
}
.footer {
  background-color: #6289AE;
  margin-top: 10px;
  height: 250px;
}
.top {
  position: absolute;
  top: 10px;
}
.bottom {
  position: absolute;
  bottom: 10px;
}
.clear {
  clear: both;
  float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://leafo.net/sticky-kit/src/jquery.sticky-kit.js"></script>
<div class="wrapper">
  <div class="header"> <a class="top">header top</a>
    <a class="bottom">header bottom</a>

  </div>
  <div class="content">
    <div class="sidebar"> <a class="top">sidebar top</a>
      <a class="bottom">sidebar bottom</a>

    </div>
    <div class="main"> <a class="top">main top</a>
      <a class="bottom">main bottom</a>

    </div>
    <div class="clear"></div>
  </div>
  <div class="footer"> <a class="top">footer top</a>
    <a class="bottom">footer bottom</a>

  </div>
</div>

当然，所有的信用转到插件的创建者，我只是这个例子显示在这里。我需要完成相同的结果，你以后，发现这个插件非常有用。