posicion fixed conforme a un elemento padre

Para prevenir que el elemento fixed no se desborde del elemento padre, te presento es solución.

by MiguelR

HTML

<div id="fixed-parent">
<div id="theFixed">0 SOMETHING<br />1 SOMETHING<br />2 SOMETHING<br />3 SOMETHING<br />4 SOMETHING<br />5 SOMETHING<br />6 SOMETHING<br />7 SOMETHING<br />8 SOMETHING<br />9 SOMETHING<br />10 SOMETHING<br />11 SOMETHING<br />12 SOMETHING<br />13 SOMETHING<br />14 SOMETHING<br />15 SOMETHING<br />16 SOMETHING<br />17 SOMETHING<br />18 SOMETHING<br />19 SOMETHING<br />20 SOMETHING<br />21 SOMETHING<br />22 SOMETHING<br />23 SOMETHING<br />24 SOMETHING<br />25 SOMETHING<br />26 SOMETHING<br />27 SOMETHING<br />28 SOMETHING<br />29 SOMETHING<br /></div>

THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED SOMETHINGS <BR>THIS IS A LONG SENTENCE THAT GOES PAST THE RED...

CSS

#fixed-parent{
  border: solid;
}
#theFixed {
  background-color:red;
  border: solid;
  position:fixed;
  top:250px;
}
#footer{
    background: url(http://1.bp.blogspot.com/-tMcpeIB_gNI/T4ma2zDt6yI/AAAAAAAAZro/eWDLUPsVr3Q/s640/Homero-Simpson_The-Simpsons_05.jpg);
    height: 400px;
width: 500px;
}

JavaScript

$(window).scroll(function(){
    var scroll_top = $(this).scrollTop(); // get scroll position top
    var height_element_parent =  $("#theFixed").parent().outerHeight(); //get high parent element
    var height_element = $("#theFixed").height(); //get high of elemeneto
    var position_fixed_max = height_element_parent - height_element; // get the maximum position of the elemen
    var position_fixed = scroll_top < 250 ? 250 - scroll_top : position_fixed_max > scroll_top ? 0 : position_fixed_max - scroll_top ;
    $("#theFixed").css("top",position_fixed);
});