对于我的网站设计，我有一个 <div class="stuffhere"></div>存储内容的位置。这些 div 有 2 个。第二个在第一个之前，借助z-index:还有stuffhere中的内容标签重复，但有时顶层的图像stuffhere被垫片取代。
我可以用一张图片来最好地描述这种设置的原因。
更新:(新图片!)
how my code renders the page http://img5.imageshack.us/img5/8246/portfolio4.png
请注意 Casey 网页设计图像 如何不受条纹背景的影响，而其他 block 则受到影响。 Casey 网页设计图片 是屏幕截图中唯一没有被背景着色的元素。
这是因为 back div 中的元素带有条纹背景，而 front div 中的元素则没有。
背面 div 的不透明度为 0.55，带有条纹背景。由于前面的 div 没有背景并且不透明度为 1，因此它的内容不受条纹背景的影响，因此没有着色。是的，它确实有色。我可以用另一张图片来说明这一点。
在下面的相同代码快照中，再次向您展示，您会看到一些图像彼此重叠。一个很好的例子是名为 work_title_heroesforhire.png 的那个。和 work_title_heroesforhire-F.png
这是为什么？
下面是没有F后缀的图片。
它受不透明度的影响，因为它位于底层。
下面是带F后缀的图片。
它不受不透明度的影响，因为它位于前层。
这就是为什么屏幕截图中的文本没有条纹背景的原因。
现在您了解我的设计是如何工作的，这就是问题所在。当我滚动时，会发生这种情况......
如何同时制作 2 个 div 的滚动条？有没有一种方法可以使 2 个 div 的滚动与 javascript 同步？首选 JQuery。
最佳答案
这是一个将底部 div 动态定位在顶部 div 后面的示例，当您滚动顶部 div 时，底部 div 也会动态滚动。
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function(){
var topdivPos = $("#topdiv").position();
$("#bottomDiv").css("position","absolute").css("top",topdivPos.top).css("left",topdivPos.left).show();
$("#topdiv").scroll(function(){
$("#bottomDiv").scrollTop($("#topdiv").scrollTop());
});
});
</script>
</head>
<body>
<div id="topdiv" style="width:300; height:100; overflow:auto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<div id="bottomDiv" style="display:none;width:300; height:100; overflow:auto;z-index:-100">
<img src="http://www.pixtual.com/wallpaper/Pixtual-10-3-2008.png"/>
</div>
</body>
</html>
关于jquery - 我怎样才能同时制作2个div的滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7256086/