Question

当另一个固定的右侧div从右侧推动时，如何按下100％宽度的固定顶部div？我正在制作可折叠的移动菜单。它由顶部固定div上的按钮切换。现在，右侧固定div与顶部固定div菜单按钮重叠。我希望此按钮在屏幕上向左移动，以便始终可见。我该如何做到这一点？我没有用css中的固定元素做很多工作。谢谢你的帮助。

注意：您只会通过调整浏览器窗口的大小来查看我正在讨论的菜单和菜单按钮。此菜单专为移动布局而设计。

网站：

http://dai1.designangler.com/

CSS：

#slide-menu {
  margin-right: -250px;
  right: 0;
  top:0;
  width: 250px;
  background: #222;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 10001;
  font-family: Roboto,sans-serif;
  color: #fff;
  font-weight: 100;
  font-size: 1.5em;
}


#push{
  /* This is the div that holds the menu button */
  position: fixed;
  top: 0;
  padding: 0 1em;
  background: #366982;
  width:100%;
  display:none; 
  z-index: 10000;
}

屏幕截图来说明要点：

菜单已关闭：http://prntscr.com/2oaf82

菜单打开，按钮重叠：http://prntscr.com/2oafv4

Answer 1

你做不到。固定是固定的。还有其他方法。这是一个：

在切换菜单（$('#push, #close').click(function () {...}）的JS中，还要切换名为body的{{1}}元素上的类

.menu-open

并更新你的css：

$('body').toggleClass('menu-open');

Answer 2

你不能用任何其他元素“推”固定元素，因为它与任何其他元素无关。

采用另一种方法的一种方法是将菜单按钮容器的css right: 0更改为left: 0（或者如果您愿意，可以设置动画）。这样做的一个提示是，如果你想交换一个元素的左右属性，你必须给另一个（被“删除”，但你不能真正删除它）auto值。

您还可以在容器元素中相对于彼此显示这两个元素，并移动该元素以实现从右侧进入菜单的效果，同时按钮向左滑动。

如何用另一个固定的div推固定div

2 个答案: