Ad

How To Add Fixed Toolbar Snap.js

- 1 answer

I'm having a bit of trouble adding a fixed header to snap.js here's what I have so far:

<div class="snap-drawers">
  <div class="snap-drawer snap-drawer-left">
    <div>
      <h4>My App</h4>
      <ul>
        <li><a target="_blank" rel="nofollow noreferrer" href="/#/">Nav 1</a></li>
        <li><a target="_blank" rel="nofollow noreferrer" href="/#/">Nav 2</a></li>
        <li><a target="_blank" rel="nofollow noreferrer" 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 target="_blank" rel="nofollow noreferrer" href="#" id="open-left"></a>
    <h1>My Toolbar</h1>
  </div>
  <div id="navbar">
    <h1>My Navbar</h1>
  </div>

</div>

Working example https://jsfiddle.net/2bg2jrs5/

As per this issue https://github.com/jakiestfu/Snap.js/issues/47 I can only get it working by moving the fixed header out of the snap-content container. But now the header doesn't slide 'in sync' (see example) with the rest of the left drawer.

Ad

Answer

Turns out that you need to have the toolbar outside the snap-content container for it to actually be fixed positioning. The problem then is the toolbar no longer drags with the drawer, this is confirmed in the GitHub issue. So I've written a little js fix to move the toolbar in and out of the snap-content container as required.

    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 */

Updated fiddle https://jsfiddle.net/2bg2jrs5/1/

Ad
source: stackoverflow.com
Ad