使用带有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 animation with scroll -

    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/

开始工作的小提琴手

提前致谢。

Answer 1

取决于您希望它何时完全不透明，但这可能是一个开始：

»»Fiddle««（多个元素类版本 - 单独设置）

»»Fiddle««（单个元素类版本 - 如果每个类只有一个元素）

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()行。滚动时打开控制台并查看值。 Fiddle with logging。另请注意此performance difference。 style要快得多。

第二版：

当元素在窗口顶部（不是元素的底部）顶部时，设置完全不透明度。请注意，我们也可以使用上述函数中的Math.min()，省略op变量以及if (op <= 1)和if (op >= 0)语句，但至少不是jsperf的快速基准透露if版本表现稍好一些。如果您有许多元素，那么您应该使用if版本。

»»Fiddle««

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