Toolbar Fixed

[miguelmoya]

Hi,

Is possible fix #toolbar on top of page? Now have position absolute and I need fixed

anyone have same problem?

my english is not very well, sorry

[paulbarroso]

#toolbar { position: absolute; top: 0; right: 0; left: 0; width: auto; height: 50px; }

#content { position: absolute; top: 0; right: 0; left: 0; bottom: 0;

margin-top: 51px;
width: 100%;

overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;

}

[interactivellama]

I originally had my toolbar within .snap-content (the way that the demo is setup), then it drags/slides with the content, but that caused it to not be locked to the viewport, only locked within the scrollable .snap-content. To have a fixed toolbar you need to place the toolbar outside of .snap-content in the code and apply position: fixed to it.

Then you will have a fixed toolbar, but it won't animate/drag then. If you don't plan on using the drag functionality and only start SnapJS on button click, then animate the toolbar to slide (css transform) for the event hook, ex.- .on('start').

[ppoisson]

Easy fix, simply add another instance of the Snap object, for example:

    var snapper = new Snap({
        element: document.getElementById('content')
    });
    var snapper2 = new Snap({
        element: document.getElementById('snap_head')
    });