使用带有jQuery的Element的Scroll调整CSS Opacity

Question

嗨,我想绑定两个div的CSS不透明度与该元素的滚动量.

比如说我有两个div:

<div class="red" style="background:red"></div>
<div class="blue" style="background:blue"></div>

当红色div进入视口时,其不透明度从0到100 - 取决于滚动的数量.

同样,当蓝色div进入视口时,其不透明度从100变为0,具体取决于滚动的数量.

我发现这个带滚动的Jquery/Javascript Opacity动画 -

    var fadeStart=100 // 100px scroll or less will equiv to 1 opacity
    ,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity
    ,fading = $('#fading')
;

$(window).bind('scroll', function(){
    var offset = $(document).scrollTop()
        ,opacity=0
    ;
    if( offset<=fadeStart ){
        opacity=1;
    }else if( offset<=fadeUntil ){
        opacity=1-offset/fadeUntil;
    }
    fading.css('opacity',opacity).html(opacity);
});

但是滚动量是绑定文档高度,而​​不是div本身.

这是一个从http://jsfiddle.net/RPmw9/工作的jsfiddle

提前致谢.

Answer 1

取决于你想要它完全不透明或不完全不透明,但这可能是一个开始:

»» 小提琴 ««(多个元素类版本 - 单独设置)

»» 小提琴 ««(单元素类版本 - 如果每个类只有一个元素)

function fader() {
    var r = $('.red'),   // The .red DIV, as variable so we do not have to look
                         // it up multiple times.
        b = $('.blue'),  // Same for blue.
        wh = $(window).height(),      // Height of window (visible part).
        dt = $(document).scrollTop(), // Pixels document is scrolled down.
        /* red offset top is a semi static values which say how many pixels it
         * is from the top of the document.
         * "Red Offset Top" - "Document Scroll Top" gives us how many pixels
         * the red DIV is from top of visible window.
         * "Window Height" - that value gives us pixels the red DIV is from top
         * normalized to start from 0 when top of DIV is at bottom of window.
         * */
        redView  = wh - (r.offset().top - dt),
        // Same for blue DIV
        blueView = wh - (b.offset().top - dt),
        // Variable to save opacity value.
        op;
    /* If redView is bigger then 0 it means the DIV has top border above bottom
     * of window. 
     */
    if (redView > 0) {
        /* Opacity goes from 0 - 1 so we divide 1 by window height and
         * multiplies it with pixels red DIV is from bottom.
         * In addition we add the height of the red DIV to window height, such
         * that we set opacity until it is out of view (Bottom border is at top
         * of window, and not only until it has top border at top of window.)
         */
        op = 1 / (wh + r.height()) * redView;
        /* If value of calulation is less or equal to one, it is in visible
         * view and we set the opacity accordingly.
         */
        if (op <= 1)
            r.css('opacity', op);
    }
    if (blueView > 0) {
        op = 1 - 1 / (wh + b.height()) * blueView;
        if (op >= 0)
            b.css('opacity', op);
    }

    // Add this line for a possible help in understanding:
    console.log(
         'Window Height:', wh, 
         'Doc Scroll Top', dt, 
         'Red offset top:', r.offset().top, 
         'Red offs.top - Doc Scroll Top', r.offset().top - dt, 
         'View:', wh - (r.offset().top - dt)
    );
}
// Attach scroll event to the function fader()
$(document).bind('scroll', fader);

好.添加了一些评论.可能不觉得这是最好的解释.理解它的更好方法可能是查看值,所以我还在函数console.log()内添加了一行fader().滚动时打开控制台并查看值.记录日志.还要注意这种性能差异.style相当快.

第二版:

当元素在窗口顶部顶部时(不是元素的底部),这设置了完全不透明度.注意我们也可以Math.min()在上面的函数中使用,省略op变量if (op <= 1)和if (op >= 0)语句,但至少没有jsperf的快速基准测试显示if版本执行得稍好一些.如果您有许多样式,那么应该使用该if版本.

»» 小提琴 ««

function fader() {
    var r = $('.red'),
        b = $('.blue'),
        wh = $(window).height(),
        dt = $(document).scrollTop(),
        redView  = wh - (r.offset().top - dt),
        blueView = wh - (b.offset().top - dt);
    if (redView > 0) {
        // Math.min() returns the lowest of given values. Here we do not want
        // values above 1.
        $('.red').css('opacity', Math.min(1 / wh * redView, 1));
    }
    if (blueView > 0) {
        $('.blue').css('opacity', 1 - Math.min(1 / wh * blueView, 1));
    }
}
// Event on scroll
$(document).bind('scroll', fader);