An einem bestimmten Punkt fixiertes div von scroll stoppen. Was fehlt in meinem Code? Jquery

Question

Ich habe dieses div namens "floating" und es muss am unteren Rand des Bildschirms starten, aber wie der Benutzer scrollt, muss es (freundlich) nach oben bewegen und fest beibehalten, bis ein anderes Div unten erreicht.

Was ich bis jetzt gemacht habe, ist, das div richtig anzuhalten, aber es bewegt sich nicht zum oberen Rand des Bildschirms, wenn der Benutzer mit dem Scrollen beginnt. Was fehlt hier?

HTML

<div class="container"> 
    <a id="floating" href="#stop"></a> 
    <div id="dummy">some content</div> 
    <div id="stop">other content near the footer</div> 
    <footer>footer</footer> 
</div> 

CSS

#floating{ 
    display: block; 
    position: fixed; 
    bottom: 5%; 
    right: 5%; 
    width: 115px; 
    height: 115px; 
    color: #fff; 
    z-index: 1; 
    background-color: #0055db; 
} 

JQUERY

function checkOffset() { 
    var a=$(document).scrollTop()+window.innerHeight; 
    var b=$('#stop').offset().top; 
    if (a<b) { 
    $('#floating').css('bottom', '5%'); 
    } else { 
    $('#floating').css('bottom', (20+(a-b))+'px'); 
    } 
} 
$(document).ready(checkOffset); 
$(document).scroll(checkOffset); 

Ich schätze alle Hilfe! Vielen Dank!

Answer 1

Try using JQuery Animate 

<script> 
    $(document).ready(function(){ 
     $(document).scroll(function(){ 
      $("#floating").animate({top: '10px'}, "slow"); 
    }); 
    }); 
</script>