jquery - 多个全屏 div 相互叠加

Question

我创建了一个网站，其中两个全屏 div 相互堆叠。单击第一个 div 时，我使用了 anchor 链接和 jQuery 创建到第二个全屏 div 的平滑向下滚动。

两个 div 都有这些 css 属性:

position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;

display: -webkit-box;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;

这些由具有这些 css 属性的容器 div 封装:

position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;

正文有溢出:隐藏；并且 logo-div 根本没有任何 css 属性。

一切正常，但是当我在第二个 div 处向下并调整浏览器窗口的高度时出现问题。然后第二个 div 的全屏模式误入歧途，第一个 div 变为可见。

您可以在此处查看该站点: http://www.nolovelost.nu/test

非常感谢任何有关如何解决此问题的提示!

Answer 1

我相信它会正常工作!

两个 div 的高度都为 100%，当您将窗口大小时增加 x 像素时，顶部和底部 div 的高度都会增加 x 像素...并且“推” ' 下方的 div 向下!

我不是 jquery 专家......但是当你在底部的 div 应该做的时候，像这样的东西!

$(window).resize(function() {
    $('html, body').animate({ scrollTop: $(document).height() },  0);
                  return false;
             });