Add a floating status bar on top of a scrollview like in Facebook app's timeline

Hi ! I've been trying to add a floating status bar on top of a scrollview like you see in Facebook app's timeline, so when you scroll down, the bar sits on top of the scrollview and scrolls with the scrollview, and when you scroll up, it scrolls up as well and stays behind the navbar.

I tried to achieve this by adding two views to a window with vertical layout, the upper view contains the status bar and the lower one scrollview, then in the scroll event callback I set the contentOffset.y to the 'top' properties of the status bar and the scrollview. But the result is not really what I want, the status bar has the exact behavior that I want, but it moves really laggy, am I doing this wrong?? How do I make it move smoothly?

Any help would be greatly appreciated! Thanks!

Try this, this is just from the top of my head so might need some fixing here and there.

var t = Ti.UI.create2DMatrix();
 
var floatingView = Ti.UI.createView({
    width: Ti.UI.FILL,
    height: 60,
    backgroundColor: 'grey',
    inView: false,
    left: 0,
    top: 0,
    transform: t.translate(0, -60)
});
 
var scrollView = Ti.UI.createScrollView({
    ....
});
 
scrollView.addEventListener('scroll', function(e) {
    if(e.contentOffset.y > 60 && !floatingView.inView) {
        floatingView.animate({
            transform: t,
            duration: 300
        });
 
        floatingView.inView = true;
    }
    else if(e.contentOffset.y < 60 && floatingView.inView) {
        floatingView.animate({
            transform: t.translate(0, -60),
            duration: 300
        });
 
        floatingView.inView = false;
    }
});
 
win.add(scrollView);
win.add(floatingView);
 
/* Titanium considers the visual positions of the views in order to which they are added to the parentView */

This should work. The code is self-explanatory. If you got questions, fire away.