Divが> 900pxスクロールで表示され、フッターdivで停止する

Question

次の問題があります。私は、900pxを上からスクロールすると-300pxから0pxに移動するDIV single-helpを持っています。私はこのコードを使用しています。

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

これはすべて動作します.DFTは、900pxをスクロールすると表示されます。しかし、私がページのフッタに到達したとき。それは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に戻るをアニメートします。なぜ私はこのことが起こっているのか理解できません。

誰でもこの問題を解決する方法を知っているのですか、なぜこれが問題になっているのかについてもっと教えてください。そして、これはずっと簡単にできると思う...ありがとう。

私は自分のサイトのようには機能しませんが、上にスクロールするとアニメーションが2回繰り返されることを示しています。 https://jsfiddle.net/r31dnqm9/

Answer 1

私はこの問題を解決しました。 -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'); 
    }); 

Answer 2

何らかの種類の衝突検出はどうでしょうか？要素がフッターに達すると、その表示が変更されます。単純な衝突検出スクリプトがあります。

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