javascript - Allow div scrolling with page scroll, but only within parent div -

i have div needs stay on page as possible when user scrolling down. starts off inside it's parent div @ top. when user scrolls, needs stay on page, until hits bottom of div, must stop scrolling on page , accept it's fate scrolling off of top of page.

confused? me too. here paint diagram of happen on scroll:

here happening:

here bodged jquery using achieve near this:

  //start div scrolling   if ($(this).scrolltop() > 420 && $(this).scrolltop() < 1200) {       $('.fixedelement').css({           'position': 'fixed',           'top': '0px'       });    }    //stop div scrolling   if ($(this).scrolltop() < 420) {       $('.fixedelement').css({           'position': 'static',           'top': '0px'       });    }    //div stop scrolling div leave parent div otherwise. master not want that.   if ($(this).scrolltop() > 1200) {       $('.fixedelement').css({           'position': 'static',           'top': '',           'bottom': '0px'       });    } 

however, have needing guess through trial error when div stop moving. there better way?

i know has been asked before , have researched it, many of results shows how move, , not how stop @ bottom of div.

if i've understood problem correctly, want inner div stay in position, far screen's top not beyond parent div's height minus inner div's height, check this jsfiddle out.

as such, you'd checking following condition:

if($(this).scrolltop() >= 0 && $(this).scrolltop() < ($('.parent').height() - $('.inner').height())){       //fix inner div here  } else {      //unfix  }