12

2 行のデータ (緑) とヘッダー (赤) があり、常に表示されている必要があります。

私がすでに持っている例をチェックしてください：

http://jsfiddle.net/j9C8R/33/

赤いヘッダーはコンテンツとともにスクロールして消えますが、現在の位置に固定されますが、コンテンツとともに垂直方向にスクロールします (MS Excel スタイル)。

これをどのように実現できますか (できれば CSS のみを使用)。

更新: 赤いヘッダーが対応するコンテンツとともに垂直方向にスクロールすることが重要ですが、水平方向にスクロールすると左端に固定されます。

.main {
  background-color: blue;
  overflow: scroll;
  height: 200px;
  width: 400px;
}

.row {
  height: 50px;
  overflow: scroll;
  clear: both;
  width: 1000px;
  background-color: yellow;
}

.sticky,
.content {
  float: left;
  width: 150px;
  border: 1px solid black;
}

.sticky {
  background-color: red;
}

.content {
  background-color: green;
}
<div class="main">
  <div class="row">
    <div class="sticky">Sticky header A</div>
    <div class="content">ContentA</div>
    <div class="content">ContentA</div>
    <div class="content">ContentA</div>
    <div class="content">ContentA</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header B</div>
    <div class="content">ContentB</div>
    <div class="content">ContentB</div>
    <div class="content">ContentB</div>
    <div class="content">ContentB</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header C</div>
    <div class="content">ContentC</div>
    <div class="content">ContentC</div>
    <div class="content">ContentC</div>
    <div class="content">ContentC</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header D</div>
    <div class="content">ContentD</div>
    <div class="content">ContentD</div>
    <div class="content">ContentD</div>
    <div class="content">ContentD</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header E</div>
    <div class="content">ContentE</div>
    <div class="content">ContentE</div>
    <div class="content">ContentE</div>
    <div class="content">ContentE</div>
  </div>
</div>

4

2 に答える 2

11

アップデート

css position stickyがあるため、以下は少し古くなっていることに注意してください

元の投稿

position:fixedスティッキーなアイテムは通常使用され、残念ながらビューポートに対してそれらを修正するため、純粋なcssを使用して目標を達成することはできないと思います。

JavaScript（この場合はjqueryライブラリ）と絶対配置を使用すると、目的を達成できるはずです。

新しいスタイル:

.row {
    height:50px;
    overflow:scroll;
    clear:both;
    width:1000px;
    position:relative; //for the absolute positioning of sticky
    background-color:yellow;
    padding-left:150px; //this is the size of your sticky column so it doesn't cover content when fully left
    box-sizing:border-box;//this is so the padding doesn't add extra width to your 1000px
}

.sticky {
    background-color:red;
    position:absolute; left:0; top:0;
}

JavaScript:

$('.main').scroll(function() {
    $(this).find('.sticky').css('left', $(this).scrollLeft());
});

http://jsfiddle.net/j9C8R/36/

于 2013-04-18T15:45:55.980 に答える
0

わかりました、私はあなたのものを廃棄し、完全に新しいものを作りました。位置相対コンテナ内に物をラップしていませんが、少なくともそれを行うことができます

垂直スクロールは簡単ですが、水平スクロールを期待してヘッダーを移動する場合は、(CSS Wont Just Do It)

デモ

CSS

.head {
    background-color: #f00;
    width: 300px;
    position: absolute;
    left: 100px;
}

.head table {
    width: 100%;
}

.body {
    position: relative;
    left: 100px;
    top: 20px;
    width: 300px;
    height: 50px;
    overflow-y: auto;
}

.body table {
    width: 100%;
}

.body td {
    width: 100px;
}

.head table td {
    width: 100px;
}

.left {
    position: absolute;
    background-color: #0f0;
    width: 90px;
    top: 40px;
}
于 2013-04-18T15:27:06.493 に答える