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

Question

我有一个有点麻烦，增加一个固定的头在这里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我只能通过将固定头移出管理内容容器来使其工作。但是现在标题不会与其他的左侧抽屉“同步”（参见示例）。

Answer 1

原来你需要为它的管理单元的内容容器外部工具栏实际上是固定的定位。问题在于工具栏不再随抽屉拖动，这在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/

Answer 2

你只需要移动#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/