jquery - 如何在不使用固定宽度的情况下使内部DIV与外部DIV的滚动位置一起移动

我有一系列构成图表的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/

最佳答案

这是因为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'});