并排固定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 - 一个覆盖另一个

回答

相关问题