CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Pa3k.m
Pa3k.m

Reputation: 1166

Issue with fixed elements when using transform:translate on parent

I have a weird problem with fixed elements with translated parents, I'll try to explain it as much as I can.

My JsFiddle is here http://jsfiddle.net/94qaueuL/1/

Basically, I have a green header that should appear when the page is scrolled into the second <section>. I also have some fancy content underneath the whole #site-wrap. If you click the <section>, it will put transform:translate(-50%, 0) into #site-wrap.

The problem is, when #site-wrap is translated, the header gets kind of messed up. It doesnt follow the position:fixed anymore.

Any Idea how I can fix this?

I hope Im making sense here...

EDIT - Oh and the header script thing where it should appear when scrolled doesnt even matter. It still gets messed when i translate the parent.

Upvotes: 0

Views: 438

Answers (2)

Smarty
Smarty

Reputation: 1

In your example you just need to put #header outside #site-wrap.

Upvotes: 0

Danield
Danield

Reputation: 125601

The problem is caused because you are using transforms.

Take a look at the spec regarding The Transform Rendering Model

Specifying a value other than ‘none’ for the ‘transform’ property establishes a new local coordinate system at the element that it is applied to.

So the element with fixed positioning will become relative to the element with the transform - not the viewport

To fix this I'd suggest using left/right positioning instead of transforms.

Upvotes: 1

Related Questions