当滚动到达Section的末尾时，更改元素的不透明度

Question

假设我有一个标头部分，高度为500px，所以现在我想在滚动到该部分底部时更改徽标的不透明度，或者更早执行50px操作。

这是我的代码，但是它将从一开始就改变不透明度。

var header = $('header');
$(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        var targetHeight =  header.outerHeight();
        var height = header.height();
        var offset = header.offset().top;
        var opacity = (height - scrollTop + offset) / height;
        $('.logo.white').css('opacity', opacity);

});

Fiddle