粘性侧边栏:向下滚动时固定在底部，向上滚动时固定在顶部

本文介绍了粘性侧边栏:向下滚动时固定在底部，向上滚动时固定在顶部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我一直在寻找一段时间，以解决我的侧边栏问题.我对自己的行为有一个特定的想法；实际上，当您向下滚动时，我希望它粘在底部，然后当您向上滚动时，我希望它以流畅的运动(不跳动)粘在顶部.我找不到我要实现的目标的示例，因此我创建了一个图像，希望可以更清楚地说明这一点:

I have been looking for some time now for a solution to my sticky sidebar problem. I have a specific idea of how I would like it to act; effectively, I would like it to stick to the bottom as you scroll down, and then as soon as you scroll back up I would like it to stick to the top, in a fluid motion (no jumping). I am unable to find an example of what I am trying to achieve, so I have created an image that I hope will illustrate the point clearer:

侧边栏位于标题下方.

向下滚动边栏时，它会保持页面内容的水平，以便您可以同时滚动边栏和内容.

到达侧边栏的底部时，侧边栏将粘在视口的底部(大多数插件仅允许粘在顶部，某些插件不允许粘在底部)

到达底部，侧边栏位于页脚上方.

当您向上滚动时，侧边栏与内容保持水平，因此您可以再次滚动浏览内容和侧边栏.

到达侧边栏的顶部，侧边栏将粘贴到视口的顶部.

到达顶部，边栏位于标题下方.

我希望这是足够的信息.我创建了一个jsfiddle来测试所有插件/脚本，对此问题我已对其进行了重置: jsfiddle/jslucas/yr9gV/2/ .

I hope this is enough information. I have created a jsfiddle to test any plugins/scripts, which I have reset for this question: jsfiddle/jslucas/yr9gV/2/ .

推荐答案

+1 到非常漂亮和说明性的图像.

+1 to the very nice and ilustrative image.

我知道这是一个老问题，但是我随便在 forum.jquery 和那里的一个答案(by @ tucker973)，建议使用一个不错的库并想在这里分享.

I know it's an old question, but I casually found the same question posted by you in forum.jquery and one answer there (by@tucker973), suggested one nice library to make this and wanted to share it here.

它被 @leafo

• github proyect
• 网页
• jsFiddle中的简单示例 (与此处的代码段相同)

• github proyect
• webpage
• simple example in jsFiddle (same code as the snippet attached here)

这里有我准备的一个非常基本的示例的代码和一个工作的演示程序，以查看结果.

Here you have the code of a very basic example that I prepared and a working demo to see the result.

/*! * Sticky-kit * A jQuery plugin for making smart sticky elements * * Source: leafo/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="ajax.googleapis/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="leafo/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>

当然，所有功劳归功于插件的创建者，我只是在此示例中进行了展示.我需要完成与您之前相同的结果，并发现此插件非常有用.