Аналог position: fixed; относительно родителя

Требуется сделать элемент, который будет перемещаться внутри родительского элемента при скроллинге страницы. Т.е, как пример - заголовок таблицы. Как только пользователь доскроллил до таблицы и скроллит дальше, заголовок прикреплен к верхней части экрана. Как только таблица кончилась, заголовок остался внизу таблицы и проскроллился вверх. Объяснение не особо понятно - вот, что я накодил сейчас - https://jsfiddle.net/atujnh80/1/

html:

<div>
  <span></span>
</div>

css:

    div {
  width: 300px;
  height: 800px;
  border: 1px solid black;
  position: relative;
}
span {
  display: block;
  width: 100%;
  height: 50px;
  border: 1px solid red;
  position: absolute;
}

Реализация на jquery:

$(window).scroll(function() {
  if (parseInt($("div").offset().top) < $(window).scrollTop()) {
    var tops = parseInt($(window).scrollTop() - $("div").offset().top);
    if (tops < $("div").height() - $("span").height()) {
      $("span").css("top", tops);
    }
  }
});

Собственно вопрос - есть ли какие - нибудь более изящные решения, а не костыль, который я натворил? Кто - нибудь реализовывал такой функционал раньше? Может быть, что - то вроде jquery UI draggable, только при скролле?