Seite an Seite befestigt divs - ein überschreibt die andere

Question

http://codepen.io/justinturner/pen/VjyWJE

Die verknüpfte codepen hat einen festen Header div.

Ich verwende Javascript, um ein Menü div auf der linken Seite hinzuzufügen, wenn das Hamburger-Symbol angeklickt wird. Dies ist auch ein fester div.

Wenn das Menü div hinzugefügt wird, scheint der Header div zu relativer Positionierung zurückzukehren und springt an den Anfang des Hauptinhalts div. Scrolle nur ein Haar hinunter und klicke dann auf den Hamburger, du wirst sehen, was ich meine.

In welches Problem renne ich hier? Wenn ein Benutzer auf den Hamburger klickt, möchte ich, dass die Kopfzeile unverändert bleibt und wie der Rest des Inhalts direkt nach rechts übersetzt wird.

<em>too much code to paste</em> 

Answer 1

Nach den spec und anderen similar questions hier auf SO, feste Elementen und übersetzt nicht gut zusammen "spielen".

Als Abhilfe können Sie könnten:

1) Verwenden Sie Übergänge (zB auf der linken Seite Eigenschaft) statt Transformation (translateX)

2) Entfernen Sie die Position. Feste Taste aus dem Behälter der Transformationen verwendet

die ersten Vorschläge von oben verfolgt (left statt translateX verwenden), um Ihren Code zu folgenden und das Problem bestehen bleibt nicht mehr bearbeiten soll.

.o-wrapper.has-push-left { 
    left: 300px; 
} 
.o-wrapper { 
    position: relative; 
    transition: left 0.3s; 
} 

#header-wrapper { 
    transition: left 0.3s; 
} 

.has-push-left #header-wrapper { 
    left: 300px; 
} 

DEMO