Как добавить неподвижную панель 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, чтобы по мере необходимости перемещать панель инструментов из контейнера оснастки.

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/