2013-11-28 108 views
0

开始向下滚动时浮动<div>,当滚动时<div>接触页脚时反之亦然。我能够通过将此代码做到这一点:开始向下滚动直到页脚开始向下滚动

if (window_top== div_top){ 
    $arrow.css({position:'fixed',bottom:0,top:"auto"}); 
} 

this link但我的问题是我得到震动效果。我怎样才能阻止这种摇动效应,并顺利地上下滚动?

+0

严重的是,什么是这样做的目的?看http://jsfiddle.net/be2Ff/14/。相同的结果没有JS和相同数量的css – TCHdvlp

+0

您好TCHdvlp,感谢您的回复,对不起,我在代码上犯了一个错误,请检查以下新代码:http://jsfiddle.net/be2Ff/15/。摇动效果在这里可见。我想停止这种摇动效果,并顺利上下滚动? – user3045602

+0

我是:我试图从一个位置浮动一个位置,当滚动 下(这个div的位置是固定的)到某个位置(例如,直到我的页脚顶部的 )垂直,并且想要做反之亦然,当我滚动 了。我谷歌它一些如何发现这jsfiddle的代码,我做了一些 修改按我的要求,但震动的影响杀了我。 – user3045602

回答

0

好的,这是你需要做的。首先,晃动行为是完全正常的看你的代码,因为!当您滚动时,测试if (window_top > div_top)基于旧的位置。 移动箭头之前。当您的箭头位于页脚下方时,您将其设置为window_top == div_top对于下一次滚动为真的方式。接下来滚动,window_top == div_top将是真实的,所以你移动你的箭......等等......总之,你需要做的是:

1:保存在一个全局变量的初始箭头顶部位置

var initialH = $('#arrow').offset().top; 

2:不同的向上滚动和向下滚动

How can I determine the direction of a jQuery scroll event?

3:同时滚动是向下,只是检查

if (window_top > div_top) 

如果属实,则可以用absolute代替fixed并将箭头附加到页脚。

4:如果滚动达:

如果arrow_top < (arrow_initial_height + $(window).scrollTop()),你不可以做什么,否则,设置回原来的顶部偏移到你的箭,所以它会收回是原来的位置。你将摆脱摇晃的影响。

为了顺利滚动,我确定有大量的教程解释如何做到这一点。

工作小提琴:http://jsfiddle.net/be2Ff/30/

+0

嗨TCHdvlp,没有振动的影响了..再次感谢。我跟着你所有的4个步骤,但对步骤有疑问2.请检查这个链接:http://jsfiddle.net/be2Ff/28/ ......现在我想要的是当向下滚动箭头应停留在原始箭头到达原始位置时的位置,不要始终粘在黄色的页脚上.....向上滚动时,向下滚动时向下滚动,像这样.. – user3045602

+0

我的不好。我会编辑我的答案。步骤4必须是:如果向上滚动...所以,如果向上滚动,当'window_top> footer_top'回到固定位置。 – TCHdvlp

+0

还有其他的错误,我会编辑小提琴。寻找答案 – TCHdvlp