TestBase

Fork it to create test

HTML

<div id="main">
    <header>Header</header>    
    <div id="content-5">Content-5</div>
    <footer>Footer</footer>    
</div>

CSS

body {  
    height: 700px;
}

div, footer, header {
    background: #edde45;
}

header {
    position: absolute;
    height: 100px;
    top: 0px;
    width: 100%;
}

footer {
    position: absolute;
    height: 200px;
    bottom: 0px;
    width: 100%;
}

#content-5 {
    background: green;
    position: absolute;
    right: 20px;
    top: 30px;
    z-index: 1;
}

JavaScript

$(window).scroll(function () {
      if (($(document).height() - $(window).scrollTop()) <= 480){
          $("#content-5").css({
              position: 'fixed',
              top: '0px',
              bottom: 'auto'
          });
      } else if ($(window).scrollTop() >= 30) {
          $("#content-5").css({
              position: 'fixed',
              top: '0px',
              bottom: 'auto'
          });
      }else{
          $("#content-5").css({
              position: 'absolute',
              top: '30px',
              bottom: 'auto'
          });
      }
  });