javascript - 使用 jQuery 调整元素滚动的 CSS 不透明度

Question

您好，我想将两个 div 的 CSS 不透明度与该元素的滚动量绑定(bind)。

例如假设我有两个 div:

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

当红色 div 进入视口(viewport)时，其不透明度从 0 变为 100 - 取决于滚动量。

同样，当蓝色 div 进入视口(viewport)时，其不透明度从 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/ 的 jsfiddle

提前致谢。

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