粘性侧边栏:向下滚动时固定在底部，向上滚动时固定在顶部 [英] Sticky sidebar: stick to bottom when scrolling down, top when scrolling up

问题描述

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

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:

1. 侧边栏位于标题下方.
2. 向下滚动边栏时，它会保持页面内容的水平，以便您可以同时滚动边栏和内容.
3. 到达侧边栏的底部时，侧边栏将粘在视口的底部(大多数插件仅允许粘在顶部，某些插件不允许粘在底部)
4. 到达底部，侧边栏位于页脚上方.
5. 当您向上滚动时，侧边栏与内容保持水平，因此您可以再次滚动浏览内容和侧边栏.
6. 到达侧边栏的顶部，侧边栏将粘贴到视口的顶部.
7. 到达顶部，边栏位于标题下方.

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

推荐答案

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

+1 to the very nice and ilustrative image.

我知道这是一个老问题，但是我随便在

I know it's an old question, but I casually found the same question posted by you in forum.jquery.com 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: 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>

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

这篇关于粘性侧边栏:向下滚动时固定在底部，向上滚动时固定在顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！