Question

我正在使用Angular Snap模块，但我不能只使用我页面的一部分。例如，我想在“捕捉”时保持页眉和页脚完好无损。

以下示例代码描述了我的问题http://plnkr.co/edit/qOilojtXpCcBm99ynuzQ?p=preview

代码

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <link rel="stylesheet" href="style.css">

         <link rel="stylesheet" href="angular-snap.css" type="text/css" />
         <script src="snap.js" type="text/javascript" charset="utf-8"></script>
         <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js" data-semver="1.2.4"></script> 
         <script src="angular-snap.js" type="text/javascript" charset="utf-8"></script>

         <script src="script.js"></script>
  </head>

  <body  ng-controller="MainCtrl">

   <!-- Header Image should here -->
   <header>
    <h1>Header</h1>
  </header>

   <!-- Menu Bar goes here -->

  <div class="wrapper">
    <div class="menu-holder">
        <ul class="menu">
            <li><a href="#">item 1</a>
            </li>
            <li class="active"><a class="test" href="#">This is the one</a>

                <ul class="submenu">
                    <li><a href="#">Submenu item 1</a>
                    </li>
                    <li><a href="#">Submenu item 2</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">menu item 3</a>
            </li>
            <li><a href="#">menu item 4</a>
            </li>
        </ul>
    </div>
    <!-- menu-holder end -->
</div>

    <!-- Both Snap-drawer and Snap-content should go below the Menu bar -->
  <snap-drawer>
   <button snap-toggle>Another Toggle Button</button>
   </snap-drawer>

    <snap-content snap-options="{tapToClose:false}">
     <button snap-toggle>Toggle</button>   
      </snap-content>


  </body>

</html>

由于

Answer 1

插件创建者在https://github.com/jtrussell/angular-snap.js/issues/75

上给出了答案

我在这里复制答案以存档目的：

这是可行的，这是一个固定页脚的例子   线程，Snap仍然适用于我们刚刚展示的整个页面   内容：

http://plnkr.co/edit/Vdz0AZ3tnlfErERmjcrY?p=preview

您可以通过更新nav元素将其更改为固定标头   这样：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"  style="background:red">
    <div class="container">
      Bottom container stuff!
    </div> 
</nav>

公平警告some issues使用固定位置   元素，只需要记住一些。

snap-content指令应该展开以填充它的容器，所以   你也可以通过包装该元素来获得一些工作   在非静态定位元素中。 Here's a rough demo

使用Angular Snap时保留页面的完整特定部分

1 个答案: