Question

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

我的问题是我的页面内容非常长，当您在页面底部滚动时，我的侧边栏不可见。

因此，当您向上和向下滚动页面时，我想让我的#sidebar div粘贴到浏览器窗口的顶部和底部。

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

因此，当您开始向下滚动时，侧边栏会像平常一样滚动，但是当您到达侧边栏的末端时，它会粘住并且不会滚动，当您开始向上滚动时，侧边栏将会跟随到顶部侧边栏到达浏览器，然后它粘住。副Versa。

这可能吗？

我创建了一个jsfiddle简单的设计布局，这是一个核心。我在边栏上添加了一个虚线边框，现在你可以选择侧边栏了。

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

任何建议，或者您知道在线教程或演示，都会非常棒！

更新

请参阅@Darek Rossman的这一尝试

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

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

由于

Answer 1

请参阅此处的小提琴：http://jsfiddle.net/dKDJz/2/

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

这是改编自CSS-Tricks上发布的solution

Answer 2

我已使用我的解决方案更新了jsfiddle http://jsfiddle.net/7ey9g/76/。

当窗口大于侧边栏时，侧边栏应保持在顶部，当侧边栏较大时，侧边栏应固定在底部。

Answer 3

你不需要任何jQuery或javascript。所有这一切都可以在position: fixed的CSS中实现。

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

#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;
}

Answer 4

这个可以帮助

http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

http://designwoop.com/2011/09/tutorial-creating-a-sticky-sidebar-using-jquery/

Answer 5

不幸的是我没有足够的代表来简单评论这个链接，所以在这里你去：

http://www.derekallard.com/blog/post/conditionally-sticky-sidebar

这已经有几年了，但基于屏幕截图，它似乎涵盖了你所需要的。

Answer 6

在此http://jsfiddle.net/dKDJz/8/

尝试此操作

我删除了相当多的代码。

我所做的是当你向下滚动它到达侧边栏的顶部时，它会粘在窗户的顶部。一旦你向上滚动到顶部，无论标题有多高，它都会在符合标题的情况下解开。

Answer 7

我已经玩过Derek正在做的事情，而且我已经完成了你最初要求的顶部和底部。

我根据自己的需要编辑了一些CSS，我相信你可以把旧东西放在那里并复制脚本。

http://jsfiddle.net/mLdnb/3/

/ * NewEdit * /

我已经取代了我所做的事情。我想出了这个：
http://jsfiddle.net/stillb4llin/dKDJz/47/

/ * EndEdit * /

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

7 个答案: