Question

我有

<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;） < / p> 谢谢。

Answer 1

问题是你无法将div2修复为div1，因为修复div意味着“保持div的顶部，从最近定位容器的内部顶部测量，常数“。而 inner top 是指容器的上半部分，当用户滚动时，它会上下移动。

解决方案（jsfiddle here）将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>

Answer 2

固定始终是浏览器窗口。您不能在带滚动条的元素的上下文中使用它。

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

    });        

});

如何使用滚动条将div修复为另一个div

2 个答案: