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 回答