Question

对于我的网站设计，我有一个<div class="stuffhere"></div>存储内容。这些div中有2个。第二个是在第一个的前面，在z-index:的帮助下，stuffhere个标签中的内容也是重复的，但有时顶层stuffhere中的图片会被替换为间隔物。

我可以用图像来描述这种设置的最佳原因。

更新:(新图片！） how my code works http://img854.imageshack.us/img854/2292/portfoliocodemarkup.png how my code renders the page http://img5.imageshack.us/img5/8246/portfolio4.png

注意 Casey网页设计图片如何不受条纹背景的影响，而其他块则是。 Casey网页设计图片是屏幕截图中唯一没有被背景染色的元素。

这是因为后部div 中的元素使用条纹背景着色，而前部div 中的元素则不是。

背面div的不透明度为0.55，条纹背景。由于前部div没有背景且不透明度为1，因此其内容不受条纹背景的影响，因此它没有着色。是的它确实有色调。我可以用另一张图片来说明这一点。

my portfolio site tinted

在下面的相同代码快照中，再次显示它，您将看到某些图像相互重叠。一个很好的例子是名为work_title_heroesforhire.png和work_title_heroesforhire-F.png的人 how my code works

为什么会这样？

下面是没有F后缀的图像。 enter image description here 它受到不透明度的影响，因为它位于后层。

下面是带有F后缀的图像。它不受不透明度的影响，因为它位于前层中。 enter image description here

这就是屏幕截图中的文字没有条纹背景的原因。

现在您了解我的设计是如何工作的，这就是问题所在。当我滚动时，会发生这种情况...... mmy portfolio site without sync'ed scrolling

如何同时制作2 div的滚动？有没有办法我可以使用javascript同步2 div的滚动？ JQuery更可取。

更新 Working example webpage you can look at

Answer 1

这是一个将底部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>

如何同时制作2 div的滚动条

1 个答案: