Question

我创建了一个网站，其中有两个全屏div，彼此堆叠在一起。当点击第一个div时，我使用了一个锚链接和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 更高的像素...并且'推动'低下来！

我不是一个jquery专家......但是当你在底部的div应该做的时候这样的事情就可以了！

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

Answer 2

Andsoa的回答听起来不错。我在window.resize上想到了什么。

我的答案并不直接，但有很多现有的脚本可以完成你想要做的事情，所以你可以通过检查它们来节省一些时间： http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/

多个全屏div相互叠加

2 个答案: