问题描述
我有一个关于轻松滚动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
这篇关于左列滚动,然后滚动条其他选项?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!