2

我创建了一个站点，其中两个全屏 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

任何有关如何解决此问题的提示将不胜感激！

4

2 回答 2

1

我相信它应该正常工作！

两个 div 都具有 100% 的高度，当您将窗口大小增加x像素时，顶部和底部 div 的高度都 将增加x像素......并且将较低的 div 向下“推”！

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

$(window).resize(function() {
    $('html, body').animate({ scrollTop: $(document).height() },  0);
                  return false;
             });
于 2013-02-08T03:46:23.373 回答
0

Andsoa 的回答听起来是对的。我在想一些关于window.resize 的东西。

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

于 2013-02-08T04:32:16.473 回答