javascript - 使用 jquery 滚动时的不透明度

Question

我正在尝试让我的 div 的不透明度逐渐增加，就像这样移动滚动条一样

$(document).ready(function() {
    $(document).scroll(function(e) {
        opacidade();
    });

    var element = $('#element');
    var elementHeight = element.outerHeight();

    function opacidade() {
        var opacityPercent = window.scrollY / 100;
        if (scrollPercent <= 1) {
            element.css('opacity', opacityPercent);
        }
    }
});

正在工作，但不透明度上升得非常快我发现示例降低了不透明度但没有提高透明度如果在我的规则 css 中我的 div 被声明为不透明度 0 任何知道应该如何

Answer 1

改变: jsFiddle

$(document).ready(function() {
    $(document).scroll(function(e){
        opacidade();
    });

    var element = $('#element');
    var elementHeight = element.outerHeight();

    function opacidade(){
        var opacityPercent = window.scrollY   / $(document).height();
        console.log(window.scrollY, opacityPercent);
            element.css('opacity', opacityPercent);
    }
});

1. scrollY 是一个像素值，因此除非您限制可能的滚动范围 [0 - 100]，否则没有理由将其除以 100。
2. 所以你需要的是将滚动除以整个文档的高度(或包含它并显示滚动条的任何它的父级)