Angular Js Bootstrap 导航栏滚动问题答案

【问题标题】：Angular Js Bootstrap Navbar scrolling issueAngular Js Bootstrap 导航栏滚动问题
【发布时间】：2014-06-09 06:37:49
【问题描述】：

我正在尝试为移动设备实现 Angular js + Bootstrap3。我在 index.html 文件中添加了导航栏（navbar-fixed-top），并且有一些表单通过 partials/myfom.html 加载。当我滚动页面时，如果文本框就在导航栏后面，点击导航栏会打开移动设备上文本框的键盘。

谁能帮我抑制滚动后导航栏后面的任何控件的事件？

代码-------

<snap-drawers>
  <div snap-drawer="right">
       <!-- some content -->
  </div>
</snap-drawers>


<snap-content>
  <div id="main-mobile-frame">
    <div class="app">
      <!-- Navbars -->
          <nav class="navbar navbar-default navbar-fixed-top my-top-bar" role="navigation">              
              <span class="head-title"><a href="#/home">Welcome</a></span>

              <div class="bg-reg-shadow btn-group pull-left top-menu-buttons">
                <div class="btn btn-navbar sidebar-toggle" id="menu_bars_id" snap-toggle>
                  <i class="glyphicon glyphicon-align-justify"></i>
                </div>
              </div>

              <div class="bg-reg-shadow btn-group pull-right top-menu-buttons" yield-to="navbarAction">
                <div  snap-toggle="right" class="btn btn-navbar"  id="right_plus_id">
                  <i class="glyphicon glyphicon-plus"></i>
                </div>
              </div>
        </nav>
        <div class="app-body scrollable">
               <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>              
       </div>
    </div>
      <ng-view ></ng-view>
    </div>  

</snap-content>

【问题讨论】：

你应该展示你的一些代码，这样人们可以尝试帮助你
我已添加代码.. 请检查。在代码中，我使用了 angular-snap-drawers。

标签： javascript html css angularjs twitter-bootstrap

【解决方案1】：

你必须添加一个 style="margin-top: XXpx;"应用程序主体的样式与导航栏的高度相同或更高，但这意味着您需要明确定义导航栏的高度 - 我还没有找到一种方法来使其具有响应性。

【讨论】：