Fixed position element inside div container only

Question

I have a fixed block element inside a container. On scrolling the fixed positioned element is going beyond the container. I understood fixed element will be positioned according to window vw. But is there any way to make sure fixed positioned element will get scrolled only upto container position. The fixed position element should not go beyond the container

The problem can be seen in the following.

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

I tried to fix the problem using the following:

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'});
}

but sometimes the fixed container is at end because of bottom 200px it should be at top using top:0px on scroll and it should be inside the container itself.

Solution

There you go, use position sticky inside .fixed-ct and add position:relative to .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>

Comments

[Marvin]

Can you explain what position:sticky does and why it works this way or point to a link to read more to make your answer better?

[Marvin]

How do you get the red rectangle to be positioned more downwards before the user starts scrolling (not in the top left corner)

[Teobis]

@Marvin sticky is like a fixed element (position fixed) but within his parent container, you can set top property, like an absolute positioned element, and will remain inside the parent element when scrolling imitating a fixed position within his parent. See the example codepen