使用JavaScript的视差效果问题

愚蠢的

我正在尝试使用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/

谢谢。

亚历克斯·W

问题在这里:

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

您正在执行字符串连接,而不是加法。

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

172px40px

代替

212px

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章