浮動DOM、固定位置 - Telerik Kendo-Mobile AppBuilder Icenium

Question

私はハイブリッドアプリケーションを構築するTelerik Kendo-Mobile AppBuilder Iceniumを使用しています。私は同じトピックで他の投稿をチェックしましたが、何も働いていませんでした。私は、剣道特有のものがあるかもしれないと思っており、誰かがこれを解決する方法を知っています。特定のビュー

<div data-role="view" 
    data-title="Rules..." 
    data-layout="main" 
    data-model="app.workoutTypeRuleInterstatial" 
    data-show="app.workoutTypeRuleInterstatial.onShow" 
    data-after-show="app.workoutTypeRuleInterstatial.afterShow" 
    id="workoutTypeRuleInterstatial_View"> 

    <ul data-role="listview" 
     data-auto-bind="false" 
     data-style="inset" 
     data-template="workoutTypeRuleInterstatialModelTemplate" 
     data-bind="{ source: workoutTypeRuleInterstatialModel.dataSource }" 
     data-pull-to-refresh="true" 
     data-endless-scroll="false"></ul> 

    <script type="text/x-kendo-template" id="workoutTypeRuleInterstatialModelTemplate"> 
     <div class="image-with-text"> 
      <table style="width: 100%;"> 
       <tr> 
        <td style="width:100%;"> 
         <a onclick="app.workoutTypeRuleInterstatial.workoutRuleClick('#: TypeId #')"> 
          <h4 id="id" class="workoutRule">#: Name #</h4> 
         </a> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </script> 


    <div id="addButton"> 
     <img src="images/add.png" class="button" id="addNewWorkoutType" /> 
    </div> 

</div> 

と、このCSSの

<style> 
    #addButton { 
     top: 70%; 
     left: 90%; 
     width: 2.3em; 
     height: 2.3em; 
     margin-top: -9em; 
     margin-left: 0em; 
     border: 0; 
     position: fixed; 
    } 

    .button { 
     padding: 0; 
     width: 2.3em; 
     height: 2.3em; 
    } 
</style> 

リストをスクロールしたときの要素が所定の位置に「固定」を維持することはできません、それはリストをスクロールし、私はそれはのようになりたいです（それはリストにスクロールしない）下の画像は

Answer 1

答えは次のとおりです。

<footer data-role="footer"> 
    <div data-role="tabstrip" id="navigation-container"> 
     <a href="components/homeView/view.html" data-icon="home">Home View</a> 
     <a href="components/settingsView/view.html" data-icon="settings">Settings</a> 
     <a href="components/contactsView/view.html" data-icon="contacts">Contacts</a> 
    </div> 
    <a data-role="button" class="floating" data-icon="compose"></a> 
</footer> 

<style> 
    .km-nova .km-button.floating { 
     position: fixed; 
     right: 20px; 
     bottom: 70px; 
     border-color: transparent; 
     border-radius: 35px; 
     width: 50px; 
     height: 50px; 
     line-height: 35px; 
     background-color: red; 
     color: white; 
    } 

     .km-nova .km-button.floating span { 
      font-size: 1.5em; 
     } 
</style>