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

Posted 2023-03-06

【中文标题】使用 jQuery 调整 CSS 不透明度与元素的滚动

【英文标题】：Adjust CSS Opacity With Element's Scroll with jQuery

【发布时间】：2014-03-13 08:49:53

【问题描述】：

您好，我想将两个 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/工作的jsfiddle

提前致谢。

【问题讨论】：

因为 offset = $(document).scrollTop() 而不是你的元素。我需要查看 scrollTop 属性以查看它是否适用于所有元素。

【参考方案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);

好的。添加了一些cmets。可能觉得这不是最好的解释。理解它的更好方法可能是查看这些值，因此我还在fader() 函数中添加了console.log() 行。打开控制台并在滚动时查看值。 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);

【讨论】：

非常感谢！太棒了！如果你不介意你能解释一下 JavaScript 以便我更好地理解它是如何工作的吗？非常感谢！

@user3143218：好的。添加了一些cmets。不确定是否可以理解。还添加了一行console.log()，希望有助于了解正在发生的事情。

非常感谢！真正全面的答案；）我有一个问题，当我在一页中添加多个蓝色和红色 div 时，它无法正常工作。控制台没有错误 :(

@user3143218：是的，如果您添加多个，一种方法是为每个 DIV 使用唯一 ID 而不是类。其他人也可以为该类添加一个循环。这是一个循环所有并单独设置的示例：Fiddle

@user3143218：错误。那不好。我会看看我是否有时间看看它。