jQuery if else top of page

Question

I cant seem to get this to work right, only one action is firing. Any other ways to write this?

$(window).on('scroll', function() {
        var scrollTop = $(this).scrollTop();

        if ( scrollTop < 1 ) {
            $('#nav-logo').transition({ scale: 1.0, y: 0 });
        } else {
            $('#nav-logo').transition({ scale: 0.5, y: -126 });
        }

    });

Answer 1

The problem was that your animations were running over each other. You can prevent it with something like this:

JSFiddle

var $nav = $('#nav-logo');
var $window = $(window);
var wasTop = true;
$window.on('scroll', function () {
    var isTop = !$window.scrollTop();
    if (isTop && !wasTop) {
        $nav.stop();
        $nav.transition({
            scale: 1.0,
            y: 0
        });
        wasTop = true;
    } else if (!isTop && wasTop) {
        $nav.stop();
        $nav.transition({
            scale: 0.5,
            y: -126
        });
        wasTop = false;
    }
});