Javascript Div出现在>；900px滚动并在页脚div处停止

我有以下问题。我有一个DIV

single help

，当从顶部滚动到

900px

时，它会从

-300px

到

0px

进行动画处理。我正在使用这个代码

jQuery(window).scroll(function() {
    var delayms = "900"; // mseconds to stay color
        if (jQuery(this).scrollTop() > 900) {
            jQuery('.single-help').stop().animate({ bottom: '0px' });
        } else $(".single-help").click(function (e) {
            jQuery('.single-help').stop().animate({ bottom: '-300px' });
                jQuery('.single-help').css('display','none').delay('delayms');
        })
    }); 

这一切都起作用了，当我滚动经过

900px

时，DIV就会出现。但当我到达页脚时。它涵盖了

页脚

DIV。现在，我正在尝试获取

。单个帮助

DIV在到达页脚时停止。为此，我使用以下代码：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
        jQuery('.single-help').stop().animate({ bottom: '0px' });
       $('.single-help').addClass('fixed_button');
   }else{
       $('.single-help').removeClass('fixed_button');
   }
});

这个CSS：

.fixed_button{
    position:absolute !important;
    margin-top:1900px;
    bottom: 270px !important;
}

这将阻止DIV遍历页脚内容。但是，现在问题来了。当我到达页面底部并向上滚动时，它看起来像是代码

jQuery（'.single help'）.stop（）.animate（{bottom:'0px'}）正在重复。DIV
single help
跳到大约
300px
并设置动画返回到
0px
。我一辈子都不明白为什么会发生这种事

有没有人知道如何解决这个问题，或者告诉我为什么会发生这种情况？我认为这可以做得简单得多。。。谢谢

我做了一个提琴我的工作不像我的网站，但它确实表明动画是重复两次滚动时，当你到达顶部
 做一些碰撞检测怎么样？如果元素到达页脚，则更改其显示。。下面是一个简单的碰撞检测脚本

function CheckDiv()
{
var ediv1 = document.getElementById('DIV1');
var ediv2 = document.getElementById('DIV2');

 ediv1.top = $(ediv1).offset().top;
 ediv1.left = $(ediv1).offset().left;
 ediv1.right = Number($(ediv1).offset().left) + Number($(ediv1).width());
 ediv1.bottom = Number($(ediv1).offset().top) + Number($(ediv1).height());

 ediv2.top = $(ediv2).offset().top;
 ediv2.left = $(ediv2).offset().left;
 ediv2.right = Number($(ediv2).offset().left) + Number($(ediv2).width());
 ediv2.bottom = Number($(ediv2).offset().top) + Number($(ediv2).height());

if (ediv1.right > ediv2.left && ediv1.left < ediv2.right && ediv1.top < ediv2.bottom && ediv1.bottom > ediv2.top)
 {
alert("hi");
}

if (ediv1.left > ediv2.left && ediv1.top > ediv2.top && ediv1.right < ediv2.right && ediv1.bottom < ediv2.bottom)
 {
alert("hello");
    }
}

函数CheckDiv（）
{
var ediv1=document.getElementById（'DIV1'）；
var ediv2=document.getElementById（'DIV2'）；
ediv1.top=$（ediv1.offset（）.top；
ediv1.left=$（ediv1.offset（）.left；
ediv1.right=数字（$（ediv1.offset（）.left）+数字（$（ediv1.width（））；
ediv1.bottom=数字（$（ediv1.offset（）.top）+数字（$（ediv1.height（））；
ediv2.top=$（ediv2）.offset（）.top；
ediv2.left=$（ediv2）.offset（）.left；
ediv2.right=数字（$（ediv2.offset（）.left）+数字（$（ediv2.width（））；
ediv2.bottom=数字（$（ediv2.offset（）.top）+数字（$（ediv2.height（））；
如果（ediv1.right>ediv2.left&&ediv1.leftediv2.top）
{
警报（“hi”）；
}
如果（ediv1.left>ediv2.left&&ediv1.top>ediv2.top&&ediv1.right
我差不多解决了这个问题。我将动画从
-300px
删除到
0px
，并使用
opacity
添加了fadeIn效果。这对我来说很有用，我将把代码留在这里以备将来参考：

jQuery(window).scroll(function() {
    var delayms = "2000"; // mseconds to stay color
        if (jQuery(this).scrollTop() > 900) {
            jQuery('.single-help').animate({'opacity':'1'},500);
        } else 
        $(".closebutton-footer").click(function (e) {
          $('.single-help').animate({'opacity':'0'},500);
          $('.single-help').css('display', 'none').delay('delayms');
        })
    });
jQuery(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 250) {
        $('.single-help').addClass('fixed_button');
        } else 
        $('.single-help').removeClass('fixed_button');
    });

清除
.stop（）
的结果是什么？如果我删除所有
stop（）
s，它仍然会执行第二个动画。所以没有变化。。。（我删除了我的评论，因为我认为它有效，但没有）。你能创建一个JSFIDLE吗？@VishalKumarSahu在OP.OP中看到我的小提琴更新了吗@杰哦