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.

Answer 2

Solution A

jQuery animate

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    $('.logo_container, .slogan').stop().animate(
        {opacity: (( 180-scroll )/100)+0.1},
        "slow"
    );
});

Solution B

CSS transition

.wrapper {
    height:1000px
}
.logo_container {
    background:red;
    width:250px;
    height:500px;
    position:relative;
    margin:0px auto;
    transition: opacity 1s ease;
}