Following sideblock

HTML

<div class="other-div">
left div
</div>

<div class="move">
move
</div>


<div class="footer">
footer
</div>

CSS

.other-div {display:block; width:500px; height:1000px; background:#7f7f7f; float:left}

.move {position: relative; display:block; width:50px; height:50px; background:#ff0000; float:right;}

.footer {clear:both; background:#386543; height:1000px}

JavaScript

(function(jQuery) {
    var element = $('.move'),
        originalY = element.offset().top, 
       
				otherDiv = 1000,
				staticHeight = otherDiv-$(element).height(); // Fixed number to stop the move-element 						before the footer
    
    var topMargin = 110;
    
    jQuery(window).on('scroll', function(event) { 
          var offset = element.offset().top; 
          var scrollTop = $(window).scrollTop();
          
					// Check if the move-block gets under the footerblock
          if(scrollTop < otherDiv){ 
              element.stop(false, false).animate({
                  top: scrollTop - originalY + topMargin
              }, 200);
          }else{
            element.stop(false, false).animate({
              top: staticHeight //If so, make sure it gets on top of the footerblock staticly
            }, 200);
          }
    });
})(jQuery);