How to smoothly have a menu bar shrink as the scrollview is pushed up?

Question

I'm trying to achieve the effect of the header collapsing when scrolling up seen here: http://youtu.be/QXeFl093_FI?t=50s

I'm quite new to famo.us but here's a jsfiddle with what I have tried so far: http://jsfiddle.net/jamalio/cy07xxs7/

var Engine = require('famous/core/Engine');
var Utility = require('famous/utilities/Utility');
var Surface = require('famous/core/Surface');
var View = require('famous/core/View');
var Surface = require('famous/core/Surface');
var Scrollview = require('famous/views/Scrollview');
var StateModifier = require('famous/modifiers/StateModifier');
var Transform = require('famous/core/Transform');

var mainContext = Engine.createContext();

var headerSize = 150;

var header = new Surface({
    content: "hello",
    properties: {
        backgroundColor: "#ccc",
        color: "#000",
        textAlign: "center",
        lineHeight: "9"
    }
})

var scrollView = new Scrollview();

var surfaces = [];

for (var i = 0, l = 30; i < l; i++) {
    var surface = new Surface({
        content: "test",
        size: [undefined, 60],
        classes: ["padding"],
        properties: {
            backgroundColor: "#fff",
            color: "#333"
        }
    })
    surface.pipe(scrollView)
    surfaces.push(surface);
}

scrollView.sequenceFrom(surfaces);

var scrollModifier = new StateModifier({ 
    size: [undefined,200],
    transform: Transform.translate(0,headerSize,0)
});

scrollView.justStarted = true;

var headerModifier = new StateModifier({ 
    size: [undefined,headerSize],
    transform: Transform.translate(0,0,1)
});

scrollView.sync.on('start', function(e) {
    console.log(e);
    scrollView.justStarted = true;
    scrollView.startingPoint = e.clientY;
});

scrollView.sync.on('update', function(e) {
    if(!scrollView.justStarted && 
       e.position < 0
      ) {
        console.log(e);
        var currentSize = headerModifier.getSize();
        console.log(currentSize);
        var changeAmount = headerSize + e.position;
        headerModifier.setSize([undefined,changeAmount]);
    }
    scrollView.justStarted = false;
});

mainContext.add(scrollModifier).add(scrollView);
mainContext.add(headerModifier).add(header);

It's tricky because the scrollview.getPosition() doesn't return the position of the entire scrollview but rather the existing nodes. In the backend the scrollview removes nodes from the view and so it doesn't account for them.

In order to get around this, I'm getting the "position" on the "update" event and on update I'm calculating the difference from the original size of the header. The problem is when you drag the scrollview past it's boundaries, it stops sending events and it usually skips the last few, so instead of the position going back to 0, it stops at -4 or so, which messes with the whole logic.

Does anyone have a better way to go about this?

Answer 1

I would do a full length scrollview and a draggable that pulls down from the top as you scroll. Just tap into the update to know the direction and how far it's moved and use the scrollview._scroller.on('edgeHit') to bring the draggable down when you hit the top. That doesn't really shrink the header as much as move it off screen but whatever. If you want the header to actually shrink you could use a modifier to scale it or just change it's size. If you want to keep the logic you have you could use the edgeHit events to reset the number to 0 or it's maximum but in general using get position on scrollview is a horrible experience that doesn't even usually give you what you want it to.