4

.pageこれが問題です。ページに絶対に配置されたdivがあります。内部には.containerdiv があり、コンテナ内には.contents があります。

.pageは一定の高さがあるため、コンテンツは 内でスクロールされます.page。この状況では、.stuckdiv を.page. (上記の文法的な間違いを犯したに違いありません!)

とにかく、フィデル:

http://jsfiddle.net/YBAvb/

更新:のスクロールに関係なく、 を.stuck上部に固定したい。.page.page

これはレイアウトです:

<div class="page">
    <div class="container">
        <div class="content"></div>
        <div class="stuck"></div>
    </div>
</div>

そして私の(動作していない)css:

.page{
    position: absolute;
    top:50px;
    left:200px;
    width:200px;
    height:300px;
    overflow:auto;
}
.container{
    position:relative;
}
.stuck{
    position: absolute;
    top:0;
    right:0;
    left:0;
    height:50px;
    background:blue;
}
.content{
    height:700px;
    background:gray;
}

青い.stuckdivが常にdivの一番上にあるようにし.pageます。何か助けはありますか?

更新: 注:簡単なトリックは、と の同じ位置と幅を作る.stuckことかもしれませんが、 の座標はいつでもJSで変わる可能性があるため、それは私の答えではありません。positions:fixed.page.page

4

2 に答える 2

4

.pageとを共通の親要素に追加し.stuckて、一方を他方の上に重ねることができます。

http://jsfiddle.net/YBAvb/1/

    .page_holder{
        position: absolute;
        top:50px;
        left:200px;
        width:200px;
        height:300px;
    }
    .page {
        position: absolute;
        top:0;
        left:0;
        width:200px;
        height:300px;
        overflow:auto;
        z-index: 1;
    }
    .container {
        position:relative;
    }
    .stuck {
        position: absolute;
        top:0;
        right:0;
        left:0;
        height:50px;
        background:blue;
        margin-right: 18px;
        z-index: 2;
    }
    .content {
        height:700px;
        background:gray;
    }
    <div class="page_holder">
        <div class="stuck"></div>
        <div class="page">
            <div class="container">
                <div class="content"></div>
            </div>
        </div>
    </div>

于 2013-11-02T16:08:06.767 に答える
0

.page の座標は JS によっていつでも変更される可能性があるためです。

...つまり、すでに JS を使用しているということです。:)

この正確な HTML マークアップを使用することはできません
。そのような場合には、常に Javascript と jQuery を使用します: JSBIN DEMO

$('.stuck').each(function(){

  var $that = $(this),
      $page = $that.closest('.page');

  $page.scroll(function(){      
    $that.css({top: this.scrollTop});
  });

});
于 2013-11-02T16:13:06.257 に答える