並排固定div - 一個覆蓋另一個

http://codepen.io/justinturner/pen/VjyWJE 並排固定div - 一個覆蓋另一個

鏈接的codepen有一個固定的標題div。

我在點擊漢堡包圖標時使用javascript在左側添加菜單div。這也是一個固定的分區。

添加菜單div時，標題div似乎恢復爲相對定位，並跳轉到主內容div的頂部。向下滾動一下頭髮，然後點擊漢堡，你會明白我的意思。

我遇到了什麼問題？當用戶點擊漢堡時，我希望標題保持不變，並像其他內容一樣直接向右翻譯。

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

來源

2016-07-15 Justin Turner

按照spec等similar questions這裏SO，固定元件和轉換不「玩」得很好。

作爲一種變通方法你可以：

1）使用的過渡（例如，在left屬性）代替變換（平移X）

2）卸下的位置：從所述容器固定按鈕，這使用變換

繼從上面（使用left而不是translateX）第一個建議，編輯代碼以下和問題應該不再存在。

.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

來源

2016-07-15 04:15:54 justinw

感謝您的答覆。在你的小提琴中，它仍然在發生。向下滾動一下，點擊漢堡包，然後導航欄跳轉到頁面頂部。向下滾動一下頭髮（像10像素），看看它在行動。 –

@JustinTurner請參閱最新的答案，我相信原因是'translateX'和'position：fixed'「元素如何」一起玩「 - [更新部分中的演示]（https://jsfiddle.net/edh6302r/1 /）展示如何使用'left'屬性來代替，而不必與'padding'和'margin'混淆 – justinw

再次感謝，讓我消化這一分鐘，但我想你已經明白了它。 –

並排固定div - 一個覆蓋另一個

回答

相關問題