Сделать два верхних блока div фиксированными после некоторой прокрутки и сбросить обратно при прокрутке вверх снова?

Привет, я пытаюсь сделать так, чтобы div оставался фиксированным после некоторой прокрутки в родительском div?

<div class = "col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class = "fw ofndr-box">
      <div class = "ofndr-box-half add-here">
        <a href = "#!/lead-court/5c0622ad78bdba5f566538d8" style = "color: white;">Header 1</a>
      </div>
      <div class = "ofndr-box-half2 add-here">
        <a href = "#" data-ng-click = "addrequestpopup()" class = "ofndr-btn pull-right">+New</a>
      </div>
      <div class = "fw ofndr-box-in">
      </div>
</div>
</div>

вот моя рабочая рабочий пример, я хочу исправить заголовок и + новую кнопку после прокрутки синего div. https://jsfiddle.net/pavansn/tvg3d709/1/