title: Fixing position relative to parent div
body: <p>Is it possible to fix an element's position <strong>relative to the parent div, not the browser window</strong>?</p>
  
  <p>Say I have:</p>
  
  <pre><code>&lt;div id="pagecontainer"&gt;
  
      &lt;div id="linkspage"&gt;
  
          &lt;div class="sidelinks"&gt;
              &lt;a href="#page1" class="link"&gt;Link 1&lt;/a&gt;
              &lt;p&gt;
              &lt;a href="#page2" class="link"&gt;Link 2&lt;/a&gt;
              &lt;p&gt;
              &lt;a href="#page3" class="link"&gt;Link 3&lt;/a&gt;
              &lt;p&gt;
              &lt;a href="#page4" class="link"&gt;Link 4&lt;/a&gt;
              &lt;p&gt;
          &lt;/div&gt;
  
          &lt;div class="linkscontent"&gt;
              content of links page
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      //OTHER PAGES
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Basically a page with two sections, the left section is a list of links, while the right section is the page's content. I want the content to be scrollable, but the links to remain fixed to the parent #pagecontainer so they don't scroll when #pagecontainer scrolls, but they'll move when I scroll the entire browser window.</p>
  
  <p>I've already tried the JQuery "fixto" plugin: <a href="https://github.com/bbarakaci/fixto" rel="noreferrer">https://github.com/bbarakaci/fixto</a>. But I can't use that one because my pages fade in/out and the script bugs out when the parent element (#pagecontainer) has an alpha of 0, it thinks the parent element is gone and has nowhere to fix to.</p>
  
  <p>Thanks.</p>