title: Position div at the top of screen after scrolling
body: <p>I'm working with angular 2, but this questions is mostly about css (I'm using bootstrap 3). I've got 2 divs (leftDiv and rightDiv) like this:</p>
  
  <pre><code>&lt;div class="row"&gt;
  
   &lt;div *ngFor="let address of addresses"&gt;
    &lt;div class="card" id="leftDiv"&gt;
     &lt;h5 class="card-text"&gt;{{address.name}}&lt;/h5&gt;
     &lt;h5 class="card-text"&gt;{{address.street}}&lt;/h5&gt;
     &lt;h5 class="card-text"&gt;{{address.city}}&lt;/h5&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;!-- bunch of code --&gt;
  
   &lt;div class="col-md-6" id="rightDiv"&gt;
    &lt;!-- should appear at the top of current view --&gt;
   &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>So, there are a bunch of cards with addresses on the left side (leftDiv). The rightDiv appears only with the click of a button, and also only 1 at a time. What happens at the moment is, that the rightDiv appears at the top of the page (so if you scrolled down far enough you don't even see it). What it should do is appear at the top of the current view.</p>
  
  <pre><code>position: fixed;
  </code></pre>
  
  <p>does that, but then it sticks to the top of the screen, which i don't want (i should just appear and stay there).
  I've also tried to set the position of the leftDiv and rightDiv to relative and absolute, but that seems only to work if one is the parent of the other (which is not possible in my case).</p>
  
  <p>Help would be greatly apppreciated.</p>
  
  <p>Solution:</p>
  
  <pre><code>document.getElementById('rightDiv').style.top = 
  document.body.scrollTop.toString()+'px';
  </code></pre>
  
  <p>(See Top Answer)</p>