3

私は持っています

<div id="div1">
  any not fixed text
  but this div has scrollbar

  <div id="div2">
  this div is fixed (without scrollbar)
  </div>

</div>

div2に固定する必要がありますがdiv1、メインブラウザのスクロールバーに固定する必要はありません。「div2をdiv1に貼り付ける」のようなものです。

div1スクロールバーがあるので、修正する必要がありますdiv2。

私がこれを作った場合：

#div1 {
    position: absolute;
}
#div1 #div2 {
    position: fixed;
}

修正さdiv1れ、ブラウザのウィンドウも修正されますが、必要なのは。だけdiv1です。

テストする例：

<html>
<head>
<style type="text/css">
#div1 {
    border: 1px solid gray;
    position: absolute;
    height: 200px;
    width: 400px;
    overflow-y: scroll;
}
#div1 #div2 {
    position: fixed;
    margin-left: 300px;
}
</style>
</head>
<body>
    <br><br><br>
    <div id="div1">
        <div id="div2">fixed text</div>

            <div style="height: 400px;"></div>
    </div>

    <div style="height: 1400px;"></div>
</body>
</html>

Q1：修正div2方法div

Q2：この場合float: right div2、右側への移動方法div1（たとえば〜margin-left: 350px;）

ありがとうございました。

4

2 に答える 2

1

問題は、div2をdiv1に固定できないことです。これは、divを固定するということは、「最も近い位置にあるコンテナの内側の上部から測定して、divの上部を一定に保つ」ことを意味するためです。内側の上部とは、ユーザーがスクロールすると上下に移動するコンテナーの上部を意味します。

解決策（ここではjsfiddle）は、div1とdiv2の両方を外部コンテナーに固定することです。これはあなたのCSSになります：

<style type="text/css">
#container{
    border: 1px solid gray;
    position: absolute;
    height: 200px;
    width: 400px;   
}

#div1{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll; 
}
#div2 {
    position: absolute;
    right: 14px;
    top: 0px;
}​
</style>

そしてこれはあなたのHTMLです

<br><br><br>
<div id="container">
    <div id="div1">
        <div style="height: 800px;"></div>
    </div>
    <div id="div2">fixed text</div>               
</div> 
<div style="height: 1400px;"></div>​​​​​​​​​​​
于 2012-12-10T01:17:47.147 に答える
1

固定は常にブラウザウィンドウにあります。スクロールバーのある要素のコンテキストでは使用できません。

これはいくつかのレベルで機能します：http： //jsfiddle.net/WP7GB/1/

<div id="div1">
    <div id="div2">fixed text</div>
    <div style="height: 400px;"></div>
</div>
<div style="height: 1400px;"></div>

CSS：

#div1 {
    border: 1px solid gray;
    position: relative;
    height: 200px;
    width: 400px;
    overflow-y: scroll;
}

#div2 {
    position: absolute;
    top:0;
    right:5px;
}

JS：

$(document).ready(function(){

    var $div2 = $("#div2");

    $("#div1").scroll(function(e){

        $div2.css("top", this.scrollTop);

    });        

});
于 2012-12-10T01:22:16.223 に答える