jQuery - DIV以滚动动作移动并将位置固定在窗口的顶部和底部 [英] jQuery - DIV to move with scrolling motion and stick position to top and bottom of window
问题描述
可能已经有一个jQuery插件可以实现这一点，但我找不到一个完全按照我所做的去做。如果有的话，请指教我，谢谢。
There may be already a jQuery plugin which can achieve this, but I can't find one to do exactly what I'm after. If there is, just point me to the tutorial, thanks.
我的问题是我有很长的页面内容，当你的时候我的侧边栏不可见在页面底部附近滚动。
My problem I have is that I have very long page content, and my sidebar is not visible when you are scrolled near the bottom of the page.
因此，当我向上和向下滚动时，我想让我的#sidebar div粘在浏览器窗口的顶部和底部页面。
So I would like to make my #sidebar div to stick to the top and bottom of my browser window as you scroll up and down the page.
我的侧边栏高度比典型的屏幕分辨率长，所以我需要侧边栏的底部粘在浏览器窗口的底部以及顶部浏览器。
My sidebar height is longer than your typical screen resolution, so I need the bottom of sidebar to sticky to the bottom of the browser window as well as the top of the browser.
因此，当您开始向下滚动时，侧栏会像平常一样滚动，但当您到达侧栏的末端时，它会粘住并且不会滚动，当您开始向上滚动时，侧边栏将一直跟随，直到侧边栏的顶部到达浏览器，然后它会粘住。副Versa。
So as you begin to scroll down, the side bar will scroll like normal, but when you reach the end the sidebar, it sticks and will not scroll, and as you begin to scroll up, the sidebar will follow until the top of sidebar reaches the browser, then it sticks. Vice Versa.
这可能吗？
我创建了一个 jsfiddle 简单的设计布局是中心。我在边栏上添加了一个虚线边框，所以你现在应该选择侧边栏。
I have created a jsfiddle of simple design layout which is central. I have added a dotted border to the sidebar so you now where the sidebar should stick.
http://jsfiddle.net/motocomdigital/7ey9g/5/
任何建议，或者您知道在线教程或演示，都会最棒的！
Any advice, or you know a online tutorial or demo, would most awesome!
更新
@Darek Rossman请看这次尝试
Please see this attempt by @Darek Rossman
他有基本的想法。但向上滚动会使其突然移动到顶部。我需要使用向上/向下滚动的侧边栏来保持流畅。但坚持窗户的顶部或底部。当页眉/页脚在视口中时，它也不应固定，因此它不会叠加。
He's got the basic idea working. But the scrolling up, causes it to snap to the top. I need the sidebar to be fluid with the scrolling up/down motion. But sticking to the either the top or bottom of the window. It should also not be fixed positioned when the header/footer are in viewport, so it does not overlay.
谢谢
推荐答案
请看这里的小提琴： http://jsfiddle.net/dKDJz/2/
基本上，你只需要观察滚动事件，一旦窗口的滚动偏移量大于侧边栏的顶部，它就会增加一个固定的类。侧栏，并在其向上滚动时删除。
Basically, you just watch for scroll events, and once the the window's scroll offset is greater than the top of the sidebar, it adds a fixed class to the sidebar, and removes when it's scrolled back up.
这是改编自CSS上发布的解决方案技巧
This was adapted from a solution posted on CSS-Tricks
这篇关于jQuery - DIV以滚动动作移动并将位置固定在窗口的顶部和底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
