logo标签列表

如何将一个带有滚动条的div固定到另一个div上？

jquerycsshtmlcss-position
3

i have

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

问题1：如何将div2固定在div上

问题2：在这种情况下，如何将div2向右浮动到div1的右侧（例如，在示例中是〜margin-left: 350px;）

谢谢。

顺便提一下：如果你有内部div的ID，那么在你的CSS中应该使用#div2{ /* style */}而不是#div1 #div2{ /* style */}。 - Roimer
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>​​​​​​​​​​​
1

Fixed定位总是相对于浏览器窗口。您不能在带有滚动条的元素上下文中使用它。

这将在某些层面上起作用： 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);

    });        

});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接