Hi everyone! I am newbie in js. Can anyone help me by editing my code? The ad which is supposed to be fixed while scrolling down is popping onto the upper image. Thanks!

Code:
<script>
$(document).ready(function () {

 var length = $('#content').height() - $('#CatsFixed').height() + $('#content').offset().top;

 $(window).scroll(function () {

 var scroll = $(this).scrollTop();
 var height = $('#CatsFixed').height() + 'px';
 var blWidth = $('#CatsFixed').width() + 'px';
 if (scroll+50 < $('#content').offset().top) {

 $('#CatsFixed').css({
 'position': 'relative',
 'top': '0'
 });

 } else if (scroll > length) {

 $('#CatsFixed').css({
 'position': 'absolute',
 'bottom': '0',
 'top': 'auto'
 });

 } else {

 $('#CatsFixed').css({
 'position': 'fixed',
 'width': blWidth,
 'display': 'block',
 'top': '50px'
 });

 }
 });

});
</script>


<img src="http://www.bildites.lv/images/hce18balwowqjht0oaw.jpg"><br>

<div class="sidebox" id="CatsFixed" style="padding-left: 0px;">
 <img src="http://www.bildites.lv/images/l1riod6myasev9g16dju.jpg">
</div>