Ионное: плавающее меню

Question

Я хочу реализовать плавающее меню, как показано здесь: CSS Floating Menu Но когда я реализую его, как в следующем Ionic Playground Это не работает. Когда я просматриваю представление, плавающее меню не остается фиксированным в заданной позиции. Он прокручивается вверх.

Так как я могу реализовать плавающее меню в ионном?

Answer 1

Принимая плавающее содержимое за пределами содержания ионов. И отредактированный стиль, чтобы избежать дублирования плавучего содержания над головой ....

<ion-pane> 
      <ion-header-bar class="bar-stable"> 
      <h1 class="title">Awesome App</h1> 
      </ion-header-bar> 

      <div class="floating-menu"> 
       <h3>Floating Menu</h3> 
       <a href="http://www.quackit.com/css/">CSS</a> 
       <a href="http://www.quackit.com/html/">HTML</a> 
       <a href="http://www.quackit.com/javascript/">JavaScript</a> 
       <a href="http://www.quackit.com/coldfusion/">ColdFusion</a> 
       <a href="http://www.quackit.com/database/">Database</a> 
      </div> 

      <ion-content> 
      ... 
      </ion-content> 
    </ion-pane> 

CSS

div.floating-menu {position:fixed;background:#fff4c8;border:1px solid #ffcc00;width:150px;z-index:100;top:44px;}