Question

首先，我知道这已被多次覆盖，但是我只是无法弄清楚如何正确插入脚本...

我想要一个div来改变滚动下降时的不透明度......

我现在所拥有的：FIDDLE

$(window).scroll(function() {
    var st = $(this).scrollTop();
    $('#liners').each(function(index) {
        if (($(this).offset().top-st) < 50) {
            $(this).css({
                'opacity': (0 + (st / $(this).offset().top))
            });
        } else {
            $(this).css({'opacity': 0.1});
        }
    })
});

它不起作用，甚至不接近......我需要帮助我不知道我是否也写得正确！

感谢您的回答，如果您需要更多我的信息，请询问！

Answer 1

下次，请测试你的小提琴（你把JS + CSS放在错误的方框中，你没有包含jQuery）。

Here is your solution

我改变CSS定义以便更容易测试（我使用的高度比你小）。除此之外，这里是相关的JS代码：

$('div#liners').scroll(function() {
    var st = $(this).scrollTop();
    var h = this.scrollHeight;
    $(this).css({
        'opacity': 1 - st / h
    });
});

您需要捕获div的滚动条，获取内容的大小（我的代码中为h）并滚动位置。

编辑：我刚想到你想要一切都依赖于窗口滚动，而不是div内容（我没有看到目的，所以我没有想到它之前）。在这种情况下，只需调整我的代码来捕获窗口的滚动，就像在原始尝试中那样。

插入javascript以根据滚动位置更改div不透明度

1 个答案: