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>

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

http://stackoverflow.com/questions/18358816/sticky-sidebar-stick-to-bottom-when-scrolling-down-top-when-scrolling-up

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:jquery – 粘性侧边栏:向下滚动时向下,向上滚动时向上