[英]Opening up my side drawer causes a header with fixed position to move when the page is scrolled
I have two div
elements in the body
, #drawer
and #content
. 我body
有两个div
元素#drawer
和#content
。 Inside the div #content
is a header
which is position: fixed
. 在div #content
内部是一个position: fixed
为header
position: fixed
。
When the top left menu button in the header is clicked, the main #content
div is translated using css3 transforms and a transition to simulate an "opened" state for the drawer. 单击标题中的左上方菜单按钮时,将使用css3转换和转换来转换主#content
div,以模拟抽屉的“打开”状态。 It's when I do this that the problem occurs. 当我这样做时,就会出现问题。
Scrolling the #content
div while the #drawer
is open, or scrolling this div a little and then opening the #drawer
causes the header
to move up to the top of the page, even though it's fixed. 在#drawer
打开的同时滚动#content
div,或稍微滚动此div,然后打开#drawer
,即使header
已#drawer
, header
#drawer
向上移动到页面顶部。
Not precisely sure what the problem is after a little while staring at it, would love a few more experienced eyes on it as I'm trying to get it done as quickly as possible. 不确定在凝视了一下问题后出了什么问题时,我希望能有更多有经验的眼神,因为我试图尽快完成它。
Would really appreciate any help you guys can offer me. 非常感谢你们能为我提供的任何帮助。 Thanks in advance :) 提前致谢 :)
I've had problems when using transform and position:fixed together. 使用transform和position:fixed在一起时遇到了问题。 In my fiddle I used transition instead of transform . 在我的小提琴中,我使用过渡而不是转换 。 I also modified your jQuery just a touch, but I think you'll get the idea. 我还稍稍修改了jQuery,但我想您会明白的。
The key is this: 关键是这样的:
#content.open,
#content.open header{
left: 70%;
}
#content, header {
transition: 300ms left;
-webkit-transition: 300ms left;
-moz-transition: 300ms left;
-o-transition: 300ms left;
left: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.