大小取决于滚动

Question

我想知道如何使元素不透明度依赖于页面的滚动位置。例如，如果我的元素位于页面中间，随着用户滚动到中间，该元素会变得越来越不透明。

谢谢！

Answer 1

您可以使用以下代码，其中 ref1 和 ref2 是 window 坐标中元素完全不透明的顶部和底部位置，fadeSize 是使元素完全不可见所需的滚动量。代码自动处理所有带有 class "ScrollFade":

的元素

$(function() {
    document.addEventListener('scroll', function(e) {
        var ref1 = $(window).height() * 0.4;
        var ref2 = $(window).height() * 0.6;
        var fadeSize = 100;
        $('.ScrollFade').each(function() {
            var $elem = $(this);
            var h = $elem.height();
            var top = $elem.offset().top - window.scrollY;
            var bottom = top + h;
            var opacity;
            if (top < ref1 && bottom > ref2 || ref1 < top && top < ref2 || ref1 < bottom && bottom < ref2) {
                opacity = 1;
            } else if (top > ref2) {
                opacity = 1 - (top - ref2) / fadeSize;
            } else if (bottom < ref1) {
                opacity = 1 - (ref1 - bottom) / fadeSize;
            }
            opacity = Math.min(Math.max(0, opacity), 1);
            $elem.css('opacity', opacity);
        });
    });
});

body {
    height: 50cm;
    position: relative;
}

#myElem {
    position: absolute;
    top: 20cm;
    height: 3cm;
    width: 5cm;
    background-color: red;
    color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="myElem" class="ScrollFade">Lorem ipsum</div>

大小取决于滚动

Size dependent on scroll

html

scroll