jQuery - DIV以滚动动作移动并将位置固定在窗口的顶部和底部

Question

可能已经有一个jQuery插件可以实现这一点,但我找不到一个完全按照我所做的去做.如果有,请指教我,谢谢.

我的问题是我有很长的页面内容,当您在页面底部滚动时,我的侧边栏不可见.

因此,当您向上和向下滚动页面时,我想让我的#sidebar div保持在浏览器窗口的顶部和底部.

我的侧边栏高度比典型的屏幕分辨率长,所以我需要侧边栏的底部粘在浏览器窗口的底部以及浏览器的顶部.

所以,当你开始向下滚动,侧栏将滚动像正常的,但是当你到达终点的侧边栏,它坚持并不会滚动,而当你开始向上滚动,侧边栏会跟随,直到侧边栏到达顶部浏览器,然后它坚持.反之亦然.

这可能吗？

我已经创建了一个简单的设计布局的jsfiddle,它是核心.我在边栏上添加了一个虚线边框,所以你现在应该选择侧边栏.

http://jsfiddle.net/motocomdigital/7ey9g/5/

任何建议,或者你知道在线教程或演示,都会非常棒!

---

UPDATE

请看@Darek Rossman的这个尝试

http://jsfiddle.net/dKDJz/4/

他有基本的想法.但向上滚动会使其突然移动到顶部.我需要使用向上/向下滚动的侧边栏来保持流畅.但坚持窗户的顶部或底部.当页眉/页脚在视口中时,它也不应固定定位,因此它不会重叠.

谢谢

Answer 1

请看这里的小提琴:http://jsfiddle.net/dKDJz/2/

基本上,您只需观察滚动事件,一旦窗口的滚动偏移量大于侧边栏的顶部,它就会向侧边栏添加一个固定的类,并在向上滚动时删除.

这是根据CSS-Tricks发布的解决方案改编的

Answer 2

为此，您不需要任何 jQuery 或 javascript。所有这些都可以通过 CSS 来实现 position: fixed。

将侧边栏选择器更改为以下内容

#sidebar {
    width: 130px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
    clear: right;
    padding: 8px;
    background: #e5e5e5;
    border: 2px dashed red;
    position: fixed;
    right: 35px;
}