javascript - 使用 JavaScript 的视差效果问题

Question

我正在尝试使用 JavaScript 实现视差效果。

我有一个主标题，其高度由浏览器的高度决定，以使其达到全高。然后，我想将辅助 header 向下推主 header 的高度。

这是我到目前为止所拥有的:

var primaryHeader = document.getElementById('primary-header');
var secondaryHeader = document.getElementById('secondary-header');
primaryHeader.style.height = (window.innerHeight || document.documentElement.clientHeight) - 40 + 'px';
secondaryHeader.style.marginTop = primaryHeader + 40 + 'px';

window.onresize = function() {
    primaryHeader.style.height = (window.innerHeight || document.documentElement.clientHeight) - 40 + 'px';
    secondaryHeader.style.marginTop = primaryHeader + 40 + 'px';
};

当我尝试将边距应用于辅助标题时，它似乎不起作用。我做错了什么根本性的事情吗？

这是一个 fiddle 示例:http://jsfiddle.net/d79TT/

谢谢。

Answer 1

问题在这里:

secondaryHeader.style.marginTop = primaryHeader.style.height + 40 + 'px';

您正在进行字符串连接，而不是加法。

因为 primaryHeader.style.height 返回类似 172px 的内容，它是一个字符串，所以最终结果将是:

172px40px

而不是

212px