左列滚动，其他选项然后滚动条？

Question

我有一个关于在html / css中轻松滚动内容的问题。 这就是我所拥有的：

在左栏中，我有我的数据。在右列中，当您单击左列中的链接时，我会加载iframe。有人知道我如何轻松滚动但我的右边iframe保持在那个位置吗？

这是我的HTML代码:(我使用了bootstrap）

<div class="row">
      <div class="span6">
            <div class="row" id="errors">
                 <div class="span6>
                 </div>
                 <div class="span6>
                 </div>
                 ....
            </div>
       </div>
       <div class="span6">
            <div id="side-content">
                <iframe id="iframe" src="" scrolling="no" frameborder="0"></iframe>
            </div>
       </div>
</div>

Answer 1

您可以尝试以下内容。

$win = $(window);
    $win.on('scroll', function() {
        $("#side-content").css({"position":"absolute", "top":"0"}, $win.scrollTop() > 1);
    });

当用户滚动超过某个点时，这背后的想法与粘性标题菜单相同。由于你总是希望它留在那里，如果用户滚动超过1个像素，它将返回到顶部：0。因此用户几乎不会注意到。

如果您尝试并且不想要它，您也可以使用

#side-content { position: fixed; top: 0; }

但如果＃slide-content height显然大于窗口

，则无效

Answer 2

尝试将iFrame的高度设置为与左侧列相同的高度。然后在需要时使溢出可滚动。如果您知道iFrame的高度，这将有效。

#errors{
    height:400px;
    overflow-y:auto;
}
#side-content{
   height:400px;
}