如何添加工具欄固定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/