Question

所以我的问题是如何让div压低它后面的所有内容，即使后面的元素有固定的位置。

让我解释一下这个场景：

我有以下结构：

<body>
   <div class="top_menu">
   </div>
   <div class="content">
   </div>
</body>

.top_menu有position:fixed;和top:0;

的地方

现在使用JavaScript我在<body>之后插入一个新的div，并将其余部分包装在另一个div中，最后得到一些看起来像这样的东西。

<body>
   <div id="notice_bar">
   </div>
   <div id="wrap">
      <div class="top_menu">
      </div>
      <div class="content">
      </div>
   </div>
</body>

现在有办法让#notice_bar div始终按下#wrap div及其所有内容吗？

更改position:fixed;的{{1}}属性不是一个选项，因为我正在处理的这个脚本应该适用于任何给定的网站。

我真的没有想法，所以任何提示都将非常感激。谢谢！

编辑：以下是我现在正在努力的具体情况，以防有人慷慨地玩arroudn吧:) http://mirlostudio.com/choeducators

Answer 1

如果您希望通知栏保留在顶部，而菜单随页面滚动，您可以使用一点jQuery / javascript来切换一个为菜单添加固定位置的类：

<强> Working Example

＆＃13;

$(window).scroll(function() {
  $('.top_menu').toggleClass('scrolling', $(window).scrollTop() > $('#wrap').offset().top);
});

＆＃13;

.top_menu {
  height: 20px;
  width: 100%;
  background: blue;
}
.content {
  position: relative;
  height: 600px;
  background: grey;
}
.scrolling {
  position: fixed;
  top: 0px;
  right: 8px;
  left: 8px;
  width: auto;
  z-index: 100;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notice_bar">Notice Bar</div>
<div id="wrap">
  <div class="top_menu">Top Menu</div>
  <div class="content">Content</div>
</div>

＆＃13;

Answer 2

如果将.wrap容器设置为position: relative; - .wrap容器中绝对定位的所有元素将与其父容器一起移动。

如何让div按下

2 个答案: