CODEWITHSUNDEEP
javascript
faooful
faooful

Reputation: 105

Parallax effect issue using JavaScript

I am trying to achieving a parallax effect using JavaScript.

I have a primary header in which its height is determined by the height of the browser to make it full height. I then want to push down the secondary header by however much the height is of the primary header.

This is what I have so far:

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

When I try to apply the margin to the secondary header it does not seem to work. Am I doing anything fundamentally wrong?

Here is an example fiddle: http://jsfiddle.net/d79TT/

Thanks.

Upvotes: 1

Views: 71

Answers (1)

Alex W
Alex W

Reputation: 38193

The issue is here:

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

You are doing string concatenation, instead of addition.

Because primaryHeader.style.height returns something like 172px, which is a string, so the end result would be:

172px40px

instead of

212px

Upvotes: 1

Related Questions