Appcelerator - Fade out bottom of the image when scrolling down

app.js

(function() {
    // Create a window
    var win = Ti.UI.createWindow({
    	backgroundColor : 'white'
    });
    
    var sv = Ti.UI.createScrollView({
        width: Ti.UI.FILL,
        height: Ti.UI.FILL,
        contentHeight: 1000,
        layout: 'vertical'
    });
    
    win.add(sv);
    
    var view = Ti.UI.createView({
        width: 300,
        height: 300
    });
    
    var iv = Ti.UI.createImageView({
        image: 'http://lorempixel.com/300/300/',
        top: 0,
        left: 0,
        width: 300,
        height: 300
    });
    
    var tr = Ti.UI.createView({
        top: 0,
        left: 0,
        width: 300,
        height: 300,
        opacity: 0,
        backgroundGradient: {
            type: 'linear',
            startPoint: { x: '0%', y: '0%' },
            endPoint: { x: '0%', y: '100%' },
            colors: [ { color: 'transparent', offset: 0.0}, { color: 'white', offset: 1.0 } ],
        }
    });
    
    view.add(iv);
    view.add(tr);
    
    sv.add(view);
    win.open();
    
    var prevY = null;
    sv.addEventListener('scroll', function(e) {
        if(prevY != null && prevY < e.y) {
            if(!e.decelerating)
                tr.opacity = 1;
        }
        
        prevY = e.y;
    });
    
    sv.addEventListener('scrollEnd', function(e) {
        tr.opacity = 0;
    });
    
    sv.addEventListener('dragEnd', function(e) {
        tr.opacity = 0;
    });
})();