Stackoverflow : Button in fixed position in only one div

http://stackoverflow.com/questions/38586661/button-in-fixed-position-in-only-one-div

HTML

<div id="top">
      <div id="middle">
         <button class="button" id="btn_fixed">Fixed Element</button>
      </div>
    </div>

    <br>
    <br>
    <div id="bottom">


    </div>

CSS

#top {
  border: 1px solid black;
  height: 900px;
  width: 80%;
  position: absolute;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  bottom: 0px;
  font-size: 16px;
  margin-left: 0px;
  cursor: pointer;
  padding: 10px 24px;
  /* float:left; */
  /* z-index:1; */
  position: fixed;
}

#bottom {
  border: 1px solid black;
  height: 900px;
  width: 80%;
  top: 910px;
  position: relative;
}

#middle {
  /* bottom: 50px; */
  /* position: fixed; */
}

JavaScript

$(window).scroll(function () {
if (($(this).scrollTop()+$(window).height())>$('#top').height()){
	$("#btn_fixed").css({ bottom: ($(this).scrollTop()+$(window).height()-		   $('#top').height())+"px" });
}else{
  $("#btn_fixed").css({ bottom: '0px' });
}
});