我正在尝试使用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/
谢谢。
问题在这里:
secondaryHeader.style.marginTop = primaryHeader.style.height + 40 + 'px';
您正在执行字符串连接,而不是加法。
因为primaryHeader.style.height
返回类似的内容172px
,它是一个字符串,所以最终结果将是:
172px40px
代替
212px
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句