在大部分滚动后,在屏幕上锁定一个div？

Question

我目前正试图找到一种方法来锁定我的标题在屏幕上的大部分已经滚动到顶部.

所以,例如,如果我的标题是150像素高,那么无论如何我可以锁定屏幕顶部的底部15像素,当用户向下滚动页面时顶部135像素从顶部滚动？因此,无论我的页面变长多久,我的标题顶部总会有最下面的15个像素.

当用户向上滚动时,我还需要反转它,以便标题可以返回到它的原始状态.

我已经尝试了一个肮脏的工作,其中另一个标题高15像素,在我的原始标题后面分层的"固定"位置,这样当完整的150像素原始屏幕离开屏幕时,我的新标题从它后面出现.这确实有效,但如果用户在中间点捕获它,它看起来很可耻.

我对JavaScript的了解非常有限,而且可能是我的答案所在.

Answer 1

我对你想要的东西感到有些困惑......从你说的话......我觉得你做的和我做的一样......但是你不喜欢它因为某种原因..

无论如何..如果我找对你,这应该工作.

http://jsfiddle.net/5pJuJ/

基本上有一个元素fixed位于标题后面,它fixed位于顶部,因此一旦向下滚动就会显示出来.

哦,对..如果像渐变之类的东西那么这个效果不是很好......那是问题吗？

我这样做是为了证明我认为你有这个问题...... http://jsfiddle.net/5pJuJ/1/(我认为你应该提供...... grr ..)

这似乎只是你想要的很好:

http://imakewebthings.github.com/jquery-waypoints/

http://imakewebthings.github.com/jquery-waypoints/sticky-elements/