如何在不使用固定寬度的情況下使內部DIV與外部DIV的滾動位置一起移動

Question

我有一系列構成圖表的DIV元素。 主要重點是下面代碼中“ rightPanel”中包含的所有內容。

topPanel具有絕對位置，在滾動rightPanel DIV時需要更改其最高值（最高：0px）。 看來我的jQuery是正確的，但未在rightPanel滾動事件上觸發。 請參見下面的代碼：

的HTML

Main
  <div class="mainContent">
    <div class="leftPanel"> Left Panel
    </div>
    <div class="rightPanel">Right Panel
      <div class="dataPanel">Data Panel
        <div class="topPanel">Top
        </div>
        <div class="bottomPanel">
            &nbsp;
            <p>Data Data Data Data Data</p>
        </div>
      </div>
    </div>

的CSS

.mainContent
{
    width: 100%;
    max-height: 500px;
    overflow: hidden;
    overflow-y: scroll !important;
    position: relative;
    border: solid 3px blue;
}
.leftPanel
{
    width: 225px;
    position: relative;
    overflow: hidden;
    border: solid 3px pink;
    float: left;
}
.rightPanel
{
    overflow: hidden;
    border: solid 3px orange;
}
.dataPanel
{
    width:21355px;
    height: 3253px;
    border: solid 3px yellow;
}
.topPanel
{
    position: absolute;
    width: 21355px;
    border: solid 4px purple;

}
.bottomPanel
{
    clear:both;
    border: solid red 3px;
}

jQuery的

var sOffset = $(".topPanel").offset().top;
var shareheight = $(".topPanel").height() + 43;
$(".rightPanel").scroll(function() {
    alert('in the function');
    var scrollYpos = $(document).scrollTop();
    if (scrollYpos > sOffset - shareheight) {
        alert('inside');
        $(".topPanel").css({
            'top': '61px',

        });
    } else {
        alert('else');
        $(".topPanel").css({
        'top': 'auto',

        });
    }
});

這是我的小提琴http://jsfiddle.net/LH7g7/

Answer 1

這是因為mainContent具有溢出（滾動條），而不是rightPanel。

您需要隱藏主要內容溢出，並顯示rightPanels溢出。 您還需要設置rightPanel的高度，以使溢出顯示出來。

在CSS中進行更改：

.mainContent
{
    width: 100%;
    max-height: 500px;
    overflow: hidden;
    position: relative;
    border: solid 3px blue;
}

.rightPanel
{
    overflow-y: auto;
    border: solid 3px orange;
}

然后在javascript中設置rightPanel的高度：

 $(".rightPanel").height($(".mainContent").height())
 $(".rightPanel").scroll(function() {'Code here'});