jquery fade out div with page scroll

问题

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

回答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.

回答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;
}

回答3:

improved the solution by changing that part ( 1000-scroll )/1000

JSFIDDLE

hope it helps

来源：https://stackoverflow.com/questions/27890007/jquery-fade-out-div-with-page-scroll