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

【问题标题】：inserting a javascript to change div opacity based on scroll position插入 javascript 以根据滚动位置更改 div 不透明度
【发布时间】：2013-07-11 21:58:41
【问题描述】：

首先，我知道这已被多次报道，但是我只是不知道如何正确插入脚本...

我想要一个 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});
        }
    })
});

它根本不起作用，甚至不靠近.. 我需要帮助我也不知道我写的对不对！

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

【问题讨论】：

标签： javascript html insert scroll

【解决方案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 内容（我没有看到这样做的目的，所以我没有想到前）。在这种情况下，只需调整我的代码以捕获窗口的滚动，就像您在最初的尝试中所做的那样。

【讨论】：