固定配置されたdiv内のスティッキーdiv

Question

divのスクロール時にスティッキーになるdivを配置する必要があり、その位置はfixedになります。以下のコードスニペットを確認してください。そこでここでは、tag部分はouter div.Hereがfiddle

あるの最上部に貼付されなければならない

<style> 
    .outer{ 
    width:300px; 
    height:400px; 
    border:1px solid red; 
    overflow:auto; 
    position:fixed; 
    top:50px; 
    left:100px; 
    } 
    .tag{ 
    position:absolute; 
    top:0px; 
    left:80px; 
    background:#ffcc33; 
    border:2px solid #dfa800; 
    border-top:0px; 
    padding:3px 5px; 
    } 
    .inner{ 
    height:800px; 
    border:1px solid green; 
    margin:0px 5px; 
    } 
</style> 

<div class="outer"> <!-- This is scroll-able--> 
    <div class="tag">Click here to Refresh</div><!-- This should be sticky--> 
    <div class="inner"><!--This content causes scrolling--> 
     Inner content........... 
    </div> 
</div> 

は、純粋なCSSでこれを達成するための任意の回避策があります。

Answer 1

タグのラッパーdivの導入お試しください - あなたはラッパーの位置決めロジックを分離し、粘着性のためにposition: fixed;にタグを設定することができますこの方法で。タグの上にposition: fixed;が単独でそれを通常のDOMフローから引き出すので、その位置を調整する必要があることに注意してください。

HTML

<div class="tag-wrapper"> 
    <div class="tag">Click here to Refresh</div> 
</div> 

CSS

.tag-wrapper { 
    position: absolute; 
    top: 0px; 
    left: 80px; 
} 

.tag { 
    position: fixed; 
    background: #ffcc33; 
    border: 2px solid #dfa800; 
    border-top: 0px; 
    padding: 3px 5px; 
} 

click to see fiddle

Answer 2

私がCSSで見る唯一のアプローチは、タグを固定位置に置き、それを親divと同じように配置することです。このよう

：

.outer { 
 
    width: 300px; 
 
    height: 400px; 
 
    border: 1px solid red; 
 
    overflow: auto; 
 
    position: fixed; 
 
    top: 50px; 
 
    left: 100px; 
 
    } 
 
    
 
    .tag { 
 
    position: fixed; 
 
    top: 50px; 
 
    left: 180px; 
 
    background: #ffcc33; 
 
    border: 2px solid #dfa800; 
 
    border-top: 0px; 
 
    padding: 3px 5px; 
 
    } 
 
    
 
    .inner { 
 
    height: 800px; 
 
    border: 1px solid green; 
 
    margin: 0px 5px; 
 
    }

<div class="outer"> 
 
    <div class="tag">Click here to Refresh</div> 
 
    <div class="inner"> 
 
    Inner content........... 
 
    </div> 
 
</div>

Answer 3

ここではそれはクロームで働いていたソリューションです。これが他の場所で失敗した場合（ネストされた固定配置との不一致のためかもしれません）、タグ要素が固定位置要素の内部にある必要がなく、その外側にある可能性がある場合は、確実に機能します。

.outer { 
    width: 300px; 
    height: 400px; 
    border: 1px solid red; 
    overflow: auto; 
    position: fixed; 
    top: 50px; 
    left: 100px; 
    } 

    .tag { 
    position: fixed; 
    top: 50px; 
    left: 180px; 
    background: #ffcc33; 
    border: 2px solid #dfa800; 
    border-top: 0px; 
    padding: 3px 5px; 
    } 

https://jsfiddle.net/ce14vcqL/4/

Answer 4

あなたは絶対位置でそれをしたい場合は、スクロールに追従するので、親は、1つのスクロールすべきではない（coordonate 0スクロールのように上に残り、上に行く）。

あなただけの内側のdiv要素をスクロールすることができる：私の答えの

.outer { 
 
    width: 300px; 
 
    height: 400px; 
 
    border: 1px solid red; 
 
    position: fixed; 
 
    top: 50px; 
 
    left: 100px; 
 
    } 
 
    
 
    .tag { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 80px; 
 
    background: #ffcc33; 
 
    border: 2px solid #dfa800; 
 
    border-top: 0px; 
 
    padding: 3px 5px; 
 
    } 
 
    
 
    .inner { 
 
    overflow: auto; 
 
    height: 100%; 
 
    border: 1px solid green; 
 
    margin: 0px 5px; 
 
    }

<div class="outer"> 
 
    <div class="tag">Click here to Refresh</div> 
 
    <div class="inner"> 
 
    Inner content........... 
 
    <br/><!-- content needed to show the scroll bar --> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    end 
 
    </div> 
 
</div>

目的は、あなたはそれがどのように動作するかを理解するために主に:)とあなたの上の支障は、実際には存在しないこと最初のCSSは、単に期待された振る舞いに対してそれを行う方法ではありませんでした。

Answer 5

固定コンテナの外側にタグを移動して同じ位置に固定できますか？