title: Translate div on scroll
body: <p>I have a div in a div.
  The first div has a unknown height. The second one has the height of 125px.</p>
  
  <p>I want to make the second one a sticky div which is only sticky in this div.</p>
  
  <p>The grey box is the container and the social media div next to it should be sticky. </p>
  
  <p><a href="https://i.stack.imgur.com/cYAVp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cYAVp.jpg" alt="Picture to show you what it currently looks like"></a></p>
  
  <p>After the container more content will come, so I cant use <code>position: fixed</code>. I tried to use <code>position: absolute</code> and change the <code>top</code> value or the <code>transform: translate</code>, but when I Do that Chrome is jittering around.</p>
  
  <p>Code that I tried to use:</p>
  
  <pre><code>$offset = $(".social-media").offset().top;
  $containerHeight = $(".sticky-container").height();
  $bottom = $containerHeight + $(".sticky-container").offset().top;
  $maxPoint = $containerHeight - $(".social-media").height();
  $(window).scroll(function(){
      if($(window).scrollTop() &gt;= $offset){
          if($(window).scrollTop() &gt;= $bottom){
              $(".social-media").css({transform: "translate(0px,"+$maxPoint+"px)"});
          }else{
              $scroll = $(window).scrollTop() - $offset;
              $(".social-media").css({transform: "translate(0px,"+$scroll+"px)"});
          }
      }else{
          $(".social-media").css({transform: "translate(0px,0px)"});
      }
  });
  </code></pre>