左列滚动，然后滚动条其他选项? [英] Left column scrolling, other options then scrollbar?

问题描述

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

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

在左列中有我的数据.在右列中，当您单击左列中的链接时，我会加载iframe.有人知道我可以轻松滚动但我的右侧iframe保持在该位置吗?

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?

这是我的html代码:(我使用了引导程序)

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>

推荐答案

您可以尝试以下操作.

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

当用户滚动到特定点之外时，其背后的思想与粘性标题菜单相同.由于您一直希望它停留在该位置，因此如果用户滚动超过1个像素，它将返回顶部:0.因此，用户几乎不会注意到它.

The idea behind this is the same as a sticky header menu when a user scrolls beyond a certain point. Since you always want it to stay there, if a user scrolls more than 1 pixel it will go back to top: 0. So it will almost be unnoticeable to the user.

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

If you try that and don't want it, you could also maybe just use

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

但是如果您的#slide-content高度明显大于窗口，那将不起作用

but that won't work if your #slide-content height is greater than the window obviously

这篇关于左列滚动，然后滚动条其他选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！