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