親divとの相対位置を固定

Question

要素の位置を、ブラウザのウィンドウではなく親divに対して固定することは可能ですか？

は、私が持っていると言う：

<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> 

右のセクションでは、ページのコンテンツである間、基本的に2つのセクションを持つページ、左側のセクションは、リンクのリストです。コンテンツをスクロール可能にしたいが、#pagecontainerがスクロールしてもスクロールしないように親の#pagecontainerに固定されたままになるリンクが、ブラウザウィンドウ全体をスクロールすると移動する。

私はすでにJQueryの "fixto"プラグインを試しました：https://github.com/bbarakaci/fixto。しかし、親要素（#pagecontainer）のアルファベットが0の場合は、ページがフェードイン/アウトしてスクリプトがバグしてしまい、親要素がなくなってしまって修正できないと思うので、私はそれを使用できません。

ありがとうございました。

Answer 1

はこのように、親position: relativeを与える：

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

はDEMOを参照してください。

Answer 2

私はこれをCodePenのために作成しました。

あなたの説明から、その半分です。

ブラウザウィンドウ全体をスクロールすると移動します。

iframeなどのJavaScriptソリューションを使用する必要があります。