we’re working on a project, that needs to be fully responsive. We used “position fixed” to make the header sticky. Of course that makes the content positioned behind the header.
Now here’s where it gets complicated: The header is responsive and changes its height relative to the viewport.
We tried a common way to use jQuery to take the height from the header and that value is added as top margin for the content. This works great so far but when using more than one scene it gets buggy. When looking at the second scene the jQuery tries to take the height from the header from the first scene which is 0.
The code being used:
$(’.content’).css(“margin-top”, $(".header").height());
Is there a way to take the value just from the current scene? Or does someone else maybe have a better solution?
You could try using the actual DIV of the Hype element instead of .content. The value of the entire Hype Div’s height (which will adjust for each scene) can be captured by returning:
var HypeHeight = document.getElementById('index_hype_container').offsetHeight
Not a lot to go on and as @Daniel has said “do you have something where we can see what you’re doing.”
If I had to guess. As you’re using a class for the header. Then if there is more than one then you are using info for the first as there is no loop or logic there to single out the particular header. As I said though. This is a guess and it would be more prudent to look at the resulting file or where it is to see what’s going on
The Layout consists of the header, content and footer. To push the content down I only need the height of the header, not of the whole index_hype_container.