jquery fade out div with page scroll

Question

I am trying to fade a div out as the page scrolls down (with the page scroll - not just a fadeOut effect). I'm adjusting the opacity of the div as the page scrolls down using this piece of code here:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
        $('.logo_container').css({'opacity':( 100-scroll )/100});
});

My issue here is that for me it fades out too fast, I'd like a much more subtle fade as the user scrolls. Can anyone think of a better logic to make a slower, more subtle fade out.

here is a JSFIDDLE showing my code in action

Answer 1

This works fine with this FIDDLE with very simple logic. Used this piece of jquery to make it work:

$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    var height = $(window).height();

    $('.logo_container, .slogan').css({
        'opacity': ((height - scrollTop) / height)
    }); 
});

(height - scrollTop) / height gives value set which is linear form 1 to 0.

Example:

height=430px and scrollTop=233px.

(height - scrollTop) / height will give opacity 0.45 approx.