修复了移动网站上的可扩展导航栏

Question

我希望在移动网站上拥有固定导航栏。到目前为止，我正在尝试将position: fixed设置为导航栏。 PLUS 我的导航栏是可扩展的，因此下面的div必须对导航栏的高度做出反应。我希望下面的div保持可滚动状态。

1）#bar{position: fixed}和#content{}

2）#bar{position: fixed}和#content{position: relative; top:58px;}

编辑以下是我的部分代码。

<div id="navigation">
   <div id="icons" class="mobile">
      <img alt="Logo Header" src="res/logo_small_w.png"/>
      <img id="menu_icon" alt="Menu Logo" onclick="menu()" style="float:right;" src="res/menu_icon.png"/>
   </div>
   <div class="menu_items">
      <h2>
         <a href="javascript:void(0)" onclick="openNext()">Nächster Hotspot</a>
         <a href="javascript:void(0)" onclick="openTermine()">Termine</a>
         <a href="javascript:void(0)" onclick="openBerichte()">Berichte</a>
         <a href="javascript:void(0)" onclick="openFeedback()">Feedback</a>
      </h2>
   </div>
</div>
<div id="content">
   <div id="load_container"></div>
</div>

CSS：

#navigation {
   box-shadow:      0px 2px 2px #005b00;
   position:        fixed;
   left:            0px;
   right:           0px;
}

#content {
   position:    relative;
   top:         58px;
}

.menu_items {
   display:         none;
   width:           100%;
}

.menu_items a {
   border-top:          1px solid grey;
   color:               inherit;
   display:             block;
   padding-bottom:      5px;
   padding-top:         5px;
   text-align:          center;
   text-decoration:     none;
}