div要素はウィンドウに対して固定されていますが、親に制限されています

私は、ウィンドウに対して一定の方法でボックスを配置しようとしていますが、サイトの特定のセクションの範囲内に限ります。これを私が作成したjsfiddleで簡単に視覚化することができます。div要素はウィンドウに対して固定されていますが、親に制限されています

https://jsfiddle.net/animyrch/dzrpg6gh/

マイ要素（黄色のボックス）は、それが画面に表示されている場所を維持する必要があります。そしてそれはまさにそれを行います。しかし、ラッパー要素（青いボックス）の高さは20emです。画面がそれ以上スクロールされると、固定要素は画面上にとどまり続けてラッパーから外れます。どのように特定のポイント（たとえば、19 emやパディングの開始点やラッパーの境界線など）よりも進まないようにして、スクロールが進むにつれて画面から消え始めるようにするにはどうすればよいですかに？私は答えを探しましたが、私の検索クエリはすべて「親に対して要素を固定しておく」と理解されています。固定された要素が特定の点に達すると、それはウィンドウに対して相対的に固定されるのではなく、相対的な親であることが望ましいが、同じことではないことは明らかです。

ご回答いただきありがとうございます。ここで

はjsfiddleからのコードです：あなたはおそらく探しているものを

HTML

<div class="wrapper"> 
    <div class="fixedElement"> 
     <p>This should stay fixed on screen but shouldn't go lower than its parent</p> 
    </div> 
</div> 
<div class="enlargingPage"></div>

CSS

.wrapper { 
    background-color: blue; 
    padding: 2em; 
    left: 50%; 
    top: 50%; 
    height: 20em; 
} 

.fixedElement { 
    background-color: yellow; 
    position: fixed; 
} 

.enlargingPage { 
    background-color: gray; 
    height:30em; 
}

出典

2016-08-28 E Animyrch Ozcelik

これは意味ですか？ - https://css-tricks.com/position-sticky/ –

はい、これは私が探していたものでした。ありがとうございました。 –