auto fix div in scrolling window

by Craig Martin

HTML

<div id="edit_menu">
    <div>Some content 1</div>
    <div>Some content 2</div>
    <div class="vfbtns_cont">target content 3</div>
    <div>Some content 4</div>
    <div>Some content 5</div>
    <div>Some content 6</div>
    <div>Some content 7</div>
    <div>Some content 8</div>
    <div>Some content 9</div>
    <div>Some content 10</div>
    <div>Some content 11</div>
    <div>Some content 12</div>
</div>

CSS

#edit_menu
{
    width:200px;
    height:150px;
    overflow:scroll; 
    overflow-x: hidden;
    position: relative;  
}

.mfixed {
  position: fixed;
  top: 0;
  width:190px;
  padding: 5px;
  background: #000;
  color: #fff;
}

JavaScript

jQuery('#edit_menu').scroll(function(){
  vfbtns_cont_cur_pos = jQuery('.vfbtns_cont').offset().top;
  if(vfbtns_cont_cur_pos < "5"){
	jQuery('.vfbtns_cont').prev('div').addClass('trig_elm');
	trig_elm_pos = jQuery('.trig_elm').offset().top;
	jQuery('.vfbtns_cont').addClass('mfixed');
	}
  if(trig_elm_pos > "5"){
	jQuery('.vfbtns_cont').removeClass('mfixed');
	}  
});