SnapJS Mobile Menu Positioning

Question

I'm trying to setup a Wordpress starter theme with an out-of-the-box mobile menu. I'm using SnapJS to create a slide out menu.

It's working fairly well - almost perfectly but I've run in to one issue that I just cannot fix.

You can find the menu in it's current state here: http://sandbox.benpalmer.me/flow/test/

The problem is that if you scroll down the page (in a browser width less than 700px) then hit the menu button, the menu will slide out but the content (in #wrapper) will jump back to the top.

I know precisely why this is happening - the positioning switches to fixed with a top set to 0px.

I've got the following JS setup:

snap.on('open', function() {
    wrapper.css({
        'top': '-' + $('body').scrollTop() + 'px'
    });
});

This almost does what I need but it basically jumps to the top and then scrolls down to this position.

I'm fairly sure in saying that this animation is coming from Snap but I'm really not sure what to remove or alter. Or even if there is a simple way to disabled this from happening?

Any help would be hugely appreciated! Thanks!

Answer 1

I found the offending line in SnapJS and fortunely it means that to fix this, I didn't have to edit SnapJS itself.

settings.element.style[cache.vendor+'Transition'] = 'all ' + settings.transitionSpeed + 's ' + settings.easing;

The fix was to set the transitionSpeed setting to 0. Now it still applies the transition but as it's set to 0 it's obviously not noticeable.