0

I have a question about easy scrolling through content in html/css. This is what I have:

enter image description here

In the left column I have my data. In the right column I load an iframe when you click on a link in the left column. Does someone know how I can easily scroll but that my right iframe stays in that position?

This is my html code: (I used 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>
4

2 回答 2

2

您可以尝试以下方法。

$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 高度明显大于窗口，那将不起作用

于 2013-05-28T15:07:09.140 回答
1

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

#errors{
    height:400px;
    overflow-y:auto;
}
#side-content{
   height:400px;
}
于 2013-05-28T09:59:56.043 回答