在开始向下滚动到页脚时浮动div

时间:2013-11-28 12:15:44

标签: jquery

要在开始向下滚动时浮动<div>,在<div>触摸页脚时停止,反之亦然向上滚动。我可以通过添加以下代码来实现:

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

this link,但我的问题是我的震动效果。如何停止这种震动效果并顺利上下滚动?

1 个答案:

答案 0 :(得分: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)

如果为true,则可以将fixed替换为absolute并将箭头附加到页脚。

4:如果滚动显示:

如果arrow_top < ( arrow_initial_height + $(window).scrollTop() ),你什么都不做,否则,将原来的顶部偏移设置回箭头,这样它就会恢复原来的位置。你将摆脱震动的影响。

对于流畅的滚动,我确信有大量的教程可以解释如何做到这一点。

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