我一直在寻找一些时间现在为我的粘性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>
