Div出现在> 900px滚动并停在页脚div

问题描述：

我遇到以下问题。我有一个DIV single-help，它从-300px动画到0px当滚动从顶部900px。我正在使用此代码。Div出现在> 900px滚动并停在页脚div

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出现。但是当我到达页面的页脚时。它涵盖了footer DIV。现在我试图让.single-help 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。我不明白为什么会发生这种事。

有谁知道如何解决这个问题，或者告诉我更多关于这是为什么？我认为这可以做得更简单...谢谢。

我做了一个小提琴，我没有像我的网站一样工作，但它确实表明，当您滚动到顶部时，动画会重复两次。 https://jsfiddle.net/r31dnqm9/

什么是摆脱'.stop（）'的结果？ –

如果我删除了所有的stop（），它仍然会执行第二个动画。所以没有改变...（我删除了我的评论，因为我认为它的工作，但它没有）。 –

你可以创建一个jsfiddle吗？ –

答

我修正了这个问题。我将-300px的动画从0px中删除，并使用opacity添加了淡入效果。这适用于我，我只是将代码留在这里供将来参考：

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'); 
    });

答

怎么样做某种碰撞检测？如果元素到达页脚，则更改其显示。以下是一个简单的碰撞检测脚本。

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"); 
    } 
}

Div出现在> 900px滚动并停在页脚div

相关推荐