Posizione di fissaggio relativa al genitore

Question

È possibile correggere la posizione di un elemento relativa al div principale, non alla finestra del browser?

Dire che ho:

<div id="pagecontainer"> 

    <div id="linkspage"> 

     <div class="sidelinks"> 
      <a href="#page1" class="link">Link 1</a> 
      <p> 
      <a href="#page2" class="link">Link 2</a> 
      <p> 
      <a href="#page3" class="link">Link 3</a> 
      <p> 
      <a href="#page4" class="link">Link 4</a> 
      <p> 
     </div> 

     <div class="linkscontent"> 
      content of links page 
     </div> 

    </div> 

    //OTHER PAGES 

</div> 

Fondamentalmente una pagina con due sezioni, la sezione di sinistra è una lista di link, mentre la sezione di destra è il contenuto della pagina. Voglio che il contenuto sia scorrevole, ma i link rimangano fissi al #pagecontainer padre in modo che non scorrano quando #pagecontainer scorre, ma si spostano quando faccio scorrere l'intera finestra del browser.

Ho già provato il plugin "fixto" di JQuery: https://github.com/bbarakaci/fixto. Ma non posso usarlo perché le mie pagine si dissolvono in apertura e fuori e lo script scappa quando l'elemento genitore (#pagecontainer) ha un alfa di 0, pensa che l'elemento genitore sia sparito e non abbia un posto dove sistemarsi.

Grazie.

Answer 1

Dare il genitore position: relative, in questo modo:

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
    top: 0; 
} 

Vedi DEMO.

Answer 2

Ho creato questo CodePen per voi.

Dalla descrizione, è a metà strada.

ma si sposteranno quando faccio scorrere l'intera finestra del browser.

Sarà necessario utilizzare iframe o qualche tipo di soluzione JavaScript.