使用JavaScript的視差效果問題

Question

我正在嘗試使用JavaScript實現視差效果。

我有一個主標頭，其高度由瀏覽器的高度決定，以使其達到全高。 然后，我想將輔助標頭向下推多少，但高度卻要比主要標頭高多少。

這是我到目前為止的內容：

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';
};

當我嘗試將邊距應用於輔助標頭時，它似乎不起作用。 我從根本上做錯了什么嗎？

這是一個小提琴示例： http : //jsfiddle.net/d79TT/

謝謝。

Answer 1

問題在這里：

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

您正在執行字符串連接，而不是加法。

因為primaryHeader.style.height返回類似於172px的字符串，所以最終結果將是：

172px40px

代替

212px