Фиксированный элемент положения только внутри контейнера div

Question

У меня есть фиксированный блочный элемент внутри контейнера. При прокрутке фиксированный позиционируемый элемент выходит за пределы контейнера. Я понял, что фиксированный элемент будет расположен в соответствии с окном VW. Но есть ли способ убедиться, что фиксированный элемент будет прокручиваться только до положения контейнера. Элемент фиксированной позиции не должен выходить за пределы контейнера

Проблема может быть видна в следующем.

https://codepen.io/anon/pen/dKLByX

Я попытался решить проблему, используя следующее:

if($(window).scrollTop()>1900){
    $('.fixed-ct').css({'bottom':'200px','top':'auto'});
}else if($(document).scrollTop() <=100) {
    $('.fixed-ct').css({'top':'10px','bottom':'auto'});
}else {
    $('.fixed-ct').css({'top':'0px','bottom':'auto'});
}

но иногда фиксированный контейнер находится в конце из-за нижних 200 пикселей, он должен быть вверху, используя top: 0px для прокрутки, и он должен находиться внутри самого контейнера.

Answer 1

Итак, используйте позицию sticky внутри .fixed-ct и добавьте позицию: относительно .main-ct

.main-ct {
  width: 1000px;
  height:600px;
  border: 1px solid #000;
  position:relative;
}
.fixed-ct {
  position: sticky;
  width:100px;
  height:20px;
  background: red;
  top:10px;
}
.like-body {
  width: 100%;
  height:1300px;
}

<div class="like-body">
  <div class="main-ct">
    <div class="fixed-ct"></div>
  </div>
</div>