如何添加固定工具栏 snap.js答案

【问题标题】：How to add fixed toolbar snap.js如何添加固定工具栏 snap.js
【发布时间】：2016-01-25 01:14:22
【问题描述】：

我在向 snap.js 添加固定标头时遇到了一些麻烦，这是我目前所拥有的：

<div class="snap-drawers">
  <div class="snap-drawer snap-drawer-left">
    <div>
      <h4>My App</h4>
      <ul>
        <li><a href="/#/">Nav 1</a></li>
        <li><a href="/#/">Nav 2</a></li>
        <li><a href="/#/">Nav 3</a></li>
      </ul>
    </div>

  </div>
  <div class="snap-drawer snap-drawer-right"></div>
</div>

<div id="content" class="snap-content">
  <div style="height:1000px">

  </div>
</div>

<div id="toolbar">
  <div>
    <a href="#" id="open-left"></a>
    <h1>My Toolbar</h1>
  </div>
  <div id="navbar">
    <h1>My Navbar</h1>
  </div>

</div>

工作示例https://jsfiddle.net/2bg2jrs5/

根据这个问题https://github.com/jakiestfu/Snap.js/issues/47，我只能通过将固定标题移出快照内容容器来使其工作。但是现在标题不会与左侧抽屉的其余部分“同步”滑动（参见示例）。

【问题讨论】：

标签： javascript css snap.js

【解决方案1】：

您只需将#toolbar 移动到#container 内，如下所示：

  <div id="content" class="snap-content">
    <div id="toolbar">
      <div>
        <a href="#" id="open-left"></a>
        <h1>My Toolbar</h1>
      </div>
      <div id="navbar">
        <h1>My Navbar</h1>
      </div>
    </div>
    <div style="height:1000px">
    </div>
  </div>

检查小提琴：https://jsfiddle.net/ano8g6en/1/

【讨论】：

谢谢，但很抱歉，在容器中移动它会导致工具栏无法修复。滚动，你会看到标题不固定，随着内容滚动。

【解决方案2】：

事实证明，您需要将工具栏放在 snap-content 容器之外才能真正固定定位。然后问题是工具栏不再与抽屉一起拖动，这在 GitHub 问题中得到了证实。因此，我编写了一个小 js 修复程序，以根据需要将工具栏移入和移出 snap-content 容器。

    var snapper = new Snap({
        element: document.getElementById('content'),
        disable: 'right',
        hyperextensible: false
    });

    /* fixed header fix */
    snapper.on('start', function () {
        if (snapper.state().state !== "left")
            document.getElementById('content').appendChild(document.getElementById('toolbar'));
    });

    snapper.on('animated', function () {
        if (snapper.state().state !== "left")
            document.getElementsByTagName('body')[0].appendChild(document.getElementById('toolbar'));
    });
    /* end fixed header fix */

更新小提琴https://jsfiddle.net/2bg2jrs5/1/

【讨论】：