title: div to follow scroll
body: <p>I'm trying to build a right box who follows the user scrolling:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>        .clearfix:after {
              content: " ";
              display: block;
              font-size: 0;
              height: 0;
              clear: both;
              visibility: hidden;
          }
  
          .wrapper {
              border: 1px solid black;
          }
  
          .column {
              float: left;
              border: 1px solid red;
          }
  
          .relative {
              position: relative;
              margin-top: 0px;
          }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="wrapper clearfix"&gt;
      &lt;div class="column"&gt;
          small or big text
      &lt;/div&gt;
      &lt;div class="column"&gt;
          &lt;div class="dmap relative"&gt;a&lt;/div&gt;
          &lt;span&gt;some other crazy stuff&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>referencey = $(".dmap").offset().top;
  
  $(window).scroll(function (event) {
  
      var y = $(this).scrollTop();
  
      if (y &gt;= referencey) {
          $(".dmap").css("margin-top", y - referencey)
      } else {
          $(".dmap").css("margin-top", 0);
      }
  
  });
  </code></pre>
  
  <p>The code works just fine. The columns sizes are irrelevant, because all I do is change the margin-top, it means the columns and wrapper always gets a new size. The downside of the code is little smalls jumps while the user is scrolling.</p>
  
  <p>An alternative to avoid the small jumps while scrolling is not to change the margin-top, but change the position of the box to fixed after <code>y &gt;= referencey</code>. The downside of the solution is a very buggy behavior relative to the columns sizes, because when I change the class to fixed, it's does not occupy space inside the right column anymore, if the left column is smaller, a whole set of new bugs appear.</p>