Jquery:通过扩展 Div 向下推固定定位的 div？

Question

我正在使用 jquery 在点击我的页面时展开一个隐藏的 div。

我有另一个 div，它是一个固定位置的 div，它是我页面中的标题。

我想做的是扩展 div，然后在这个可扩展的 div 扩展时将页眉 div 和我页面中的所有其他内容向下推。

我已经尝试过固定 div 的相对位置，但我需要这个 div 始终出现在屏幕上，这就是我给它一个固定位置的原因!

这是一个Jsfiddle明白我的意思。

html结构是这样的:

<div align="center" class="boxs">
<p id="welcome">Welcome</p>
</div>
<div id="bubs" data-role="header" data-tap-toggle="false" data-position="fixed" data-theme='d'>
    <h1 id="reveal" class="header-title">Click Here</h1>
</div>

有人可以建议如何实现这一点吗？

如有任何帮助，我们将不胜感激。

Answer 1

我能得到的最近的。

正如我提到的，固定的 div 是固定的，所以除非您告诉它，否则它不会去任何地方。您可以为顶部位置和边距等设置动画，但我想我更喜欢将位置属性从 fixed 切换到 relative。

$('#a-sidebar').click(function() {
  $('#bubs').toggleClass('down');
  $('.boxs').slideUp('slow', function() {
    // Animation complete.

  });
});

$('#reveal').click(function() {
  $('#bubs').toggleClass('down');
  $('.boxs').slideToggle('slow', function() {
    // Animation complete.

  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.boxs {
  height: 300px;
  background-color: #333;
  padding: 10px;
  display: none;
}
#welcome {
  color: #F8F8F8;
  font-size: 24px;
}
#bubs.down {
  position: relative;
}
main {
  height: 250px;
  background: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center" class="boxs">
  <p id="welcome">Welcome</p>
</div>
<div id="bubs" data-role="header" data-tap-toggle="false" data-position="fixed" data-theme='d'>
  <h1 id="reveal" class="header-title">Click Here</h1>

</div>
<main></main>