jQuery淡出div与页面滚动 [英] jquery fade out div with page scroll

问题描述

当页面向下滚动时，我试图淡出div(使用页面滚动-不仅是fadeOut效果).当页面使用以下代码向下滚动时，我正在调整div的不透明度:

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.

这是一个 JSFIDDLE ，该代码显示了我的代码

here is a JSFIDDLE showing my code in action

推荐答案

这与 FIDDLE 配合使用非常简单. 使用了这条jquery使其工作:

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)
    }); 
});

(高度-scrollTop)/高度给出的值集是从1到0的线性形式.

示例:

height = 430px和scrollTop = 233px.

height=430px and scrollTop=233px.

(高度-scrollTop)/高度将使不透明度达到0.45.

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

这篇关于jQuery淡出div与页面滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！