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>