2016-11-15 2 views
1

私はcssについて簡単な質問をしています。 私のプロジェクトでは、私は長い幅のテーブルを持っています。あなたは下のスクロールがneseseryで見られるようなcss浮動列ヘッダー

enter image description here

:このように。 予測は今月の彼の下のヘッダーです。 2番目の画面で、最後までスクロールしたときの状況が表示されます。 On second screen you see the situation when i scroll to the end.

現在、予測テキストはセルの中央にあります。 したがって、このセルがずっと長くなると、予測されたテキストが中央に向かって表示されます。私の質問です:私はいつも私が予測セクションとscroolとそのフロートでscroolinときにこのテキストを表示することは可能ですか?

+0

唯一の方法は、 'ポジションです。少なくとも、JavaScriptソリューションではなくCSSソリューションを探しているなら、少なくとも。 –

+0

私はむしろスクロールバーの位置を知っているJavaScriptソリューションを探しています。これはより安定しており、奇妙なCSSの配置よりも「ハック」が少ないと感じています。 –

答えて

0

解決策として、透明な背景を持つ絶対配置レイヤを作成できます。

は、一例として、スニペットを見て:fixed`:私は考えることができる代わりに、ドキュメントフローの表示ビューポートに基づいて要素を配置する

.div1 { 
 
    width: 400px; 
 
    height: 200px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    background-color: green; 
 
    color: yellow; 
 
} 
 
.div2 { 
 
    position: relative; 
 
    width: 1000px; 
 
    height: 170px; 
 
    background-color: yellow; 
 
    color: green; 
 
    top: 30px; 
 
} 
 
.hdr { 
 
    position: absolute; 
 
    left: 8px; 
 
    top: 8px; 
 
    text-align: center; 
 
    width: 400px; 
 
    height: 30px; 
 
    background: transparent; 
 
    color: white; 
 
}
<div class="div1"> 
 
    <div class="hdr">HEADER</div> 
 
    <div class="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis fringilla tellus. Pellentesque porttitor elit sit amet arcu efficitur, vel ultricies lacus posuere. Etiam sed quam quis 
 
tellus accumsan vehicula quis a enim. 
 
Donec volutpat, justo ut tempor facilisis, dui erat semper leo, vel facilisis libero arcu quis est. Mauris dapibus hendrerit porta. Sed non nisi libero. In hac habitasse platea dictumst. Aliquam erat volutpat. Etiam rhoncus, metus vel 
 
ultrices scelerisque, magna felis dignissim tellus, in suscipit neque diam eu libero. Fusce accumsan fringilla libero, ut auctor odio maximus vel. 
 
Aenean a venenatis leo, elementum varius enim. Donec vitae turpis sit amet magna aliquet pulvinar nec eget odio. Ut vitae ornare augue. 
 
Sed iaculis enim at scelerisque suscipit. Cras at tortor congue, vestibulum ipsum a, viverra lectus. Cras massa neque, commodo sed lacus id, convallis sodales urna</div> 
 
    </div>

関連する問題