41

誰かがこれに対する解決策を見つけたのだろうか？

スクロール コンテナの上部に要素を追加するソリューションを探しています

HTML:

<div class="container">
  <div class="header">title</div>
  <div class="element">......</div>
  ... (about 10-20 elements) ...
  <div class="element">......</div> 
</div>

すべての「要素」にはposition:relative、

コンテナには次の CSS があります。

.container {
  position:relative;
  width:200px;
  height:400px;
  overflow-y:scroll;
}

スクロール位置と下にスクロールする要素に関係なく、ヘッダーをコンテナーの上に置いておきたい。

これまでのCSS：

.header {
  position:absolute; /* scrolling out of view :-( */
  z-index:2;
  background-color:#fff;
}
.element{
  position: relative;
}

すべての要素がブロック要素であり、ヘッダーをコンテナーの外に移動することはできません。jquery は、現時点ではオプションではありません。

4

7 に答える 7

4

この場合の解決策は、スクロール要素の外側にタイトルをポップすることです。

<div class="header">title</div>
<div class="container">
    <div class="element">......</div>
    <div class="element">......</div>
</div>

可能であれば、おそらくより良いセマンティック要素があるはずですが（ここで推測するだけです）：

<h3>title</h3>
<ul>
    <li>......</li>
    <li>......</li>
</ul>
于 2012-06-29T13:15:29.130 に答える
4

jQuery UI には、この目的のためだけにposition()ユーティリティ メソッドが追加されており、作業が楽になります。

$( "#someElement" ).position({
    of:  //Element to position against,
    my:  //which position on the element being positioned,
    at:  //which position on the target element eg: horizontal/vertical,
    offset:  // left-top values to the calculated position, eg. "50 50"
});

間違いなく私を助けました。

于 2012-06-29T13:16:17.703 に答える