Question

我有一系列构成图表的DIV元素。主要焦点是下面代码中“rightPanel”中包含的所有内容。

topPanel有一个绝对位置，当滚动右侧面板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有溢出（scroller）而不是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'});

如何使用外部DIV的滚动位置进行内部DIV移动而不使用固定宽度

1 个答案: