如何让2个div同时滚动

发布于 2024-12-02 09:49:45 字数 1722 浏览 0 评论 0 原文

对于我的网站设计，我有一个存储内容的

。这些 div 有 2 个。第二个位于第一个之前，借助 z-index: 另外，两个 stuffhere 标签中的内容都是重复的，但有时顶部的图像层stuffhere 被替换为间隔。

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

更新：（新图片！） 我的代码有效></a>

<a href= 我的代码如何呈现页面http://img5.imageshack.us/img5/8246/ Portfolio4.png

请注意，Casey 网页设计图像 不受条纹背景的影响，而其他块则受到影响。 Casey 网页设计图像是屏幕截图中唯一未被背景着色的元素。

这是因为 back div 内的元素带有条纹背景，而 front div 内的元素则不然。

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

myportfoliositetinted

在下面的相同代码快照中，再次向您展示，您将看到某些图像彼此重叠。一个很好的例子是 work_title_heroesforhire.png 和 work_title_heroesforhire-F.png 我的代码如何工作

这是为什么？

下面是没有 F 后缀的图像。在此处输入图像描述当它放置在背面层时，它会受到不透明度的影响。

下面是带有 F 后缀的图像。它不受不透明度的影响，因为它放置在前层中。在此处输入图像描述

这就是屏幕截图内的文本没有条纹背景色调的原因。

现在你明白我的设计是如何工作的了，这就是问题所在。当我滚动时，会发生这种情况...... mmy 投资组合网站没有同步滚动

如何同时滚动 2 个 div？有没有办法可以用 javascript 同步 2 个 div 的滚动？ jQuery 更可取。

更新您可以查看的工作示例网页

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ぃ弥猫深巷。 2024-12-09 09:49:45

下面是一个示例，它将底部 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>

Here is an example that positions the bottom div dynamically behind the top div and as you scroll the top div, the bottom div dynamically scrolls.

<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>

回复收藏 0 原文

~没有更多了~