Question

这对我来说很奇怪，因为这个代码适用于工作的所有元素都很好，除了一个。相当令人沮丧。我已经在chrome，firefox和iOS Safari上测试了这个。

如果它会有所帮助，这是一个手工艺项目，但我认为它并不相关。

我根据页面的scrollTop（）位置输入/输出元素。我可以看到Chrome的开发者工具中的不透明度正在所有元素上正确设置，并且没有其他不透明度覆盖它。

问题是，即使使用jquery将不透明度设置为0.81

，您在下面看到的蓝色元素内的文本也是不可见的

下面的图片是事物不起作用的元素。

以下是我的树枝模板的相关部分：

<section id="home-about" class="home-section bghidden">
    <div class="inner scrollHide">
        {{entry.aboutPreview}}
        <a href="/about" class="button-green">
            <span>learn more</span>
        </a>
    </div>
    <img id="collage" class="scrollHide" srcset="{{ craft.imager.srcset(transformedPNG) }}"
        sizes="(min-width: 1024px) 40vw, 100vw" src="{{collage.url}}" />
</section>
<section id="home-videos" class="home-section">
    <div id="home-interviews" data-scroll-speed="3">
        <div class="inner scrollHide">
            {{entry.interviewsPreview}}
            <a href="/design" class="button-blue">
                <span>see interviews</span>
            </a>
        </div>
    </div>
</section>

此函数计算不透明度值：

function showOnScroll() {
    var page = $("body").attr('class').split(" ")[0],
        offsets = {
            home: [0.5, 0.75],
            italiaIndex: [0, 0.5],
            team: [0, 0.5],
            v: [0.5, 0.75]
        };

    if (offsets[page]) {
        $entries.each(function(ind, el) {
            var $entry = ind !== 0 ? $entries.eq(ind - 1) : $entries.eq(0),
                $scrollStart = ind !== 0 ? parseFloat($entry.attr('data-offset')) + (parseFloat($entry.attr('data-height')) * offsets[page][0]) : 0,
                $scrollEnd = ind !== 0 ? parseFloat($entry.attr('data-offset')) + (parseFloat($entry.attr('data-height')) * offsets[page][1]) : 0,
                $opacity;
            if (scrollPos > $scrollStart && scrollPos < $scrollEnd) {
                $opacity = ((scrollPos - $scrollStart) / ($scrollEnd - $scrollStart)).toFixed(2);
            } else if (scrollPos <= $scrollStart) {
                $opacity = 0;
            } else if (scrollPos >= $scrollEnd) {
                $opacity = 1;
            }
            $entries.eq(ind).find(".scrollHide").css('opacity', $opacity);
        });
    }
}

这个监听器调用上面的函数：

window.addEventListener('scroll', function() {
    this.requestAnimationFrame(function() {
        scrollPos = window.pageYOffset;
        /*
          Irrelevant code removed
        */
        parallax();
        showOnScroll();
    });
});

Answer 1

我没有在我的问题中发布CSS，但在简化HTML后，我认为该问题与在mix-blend-mode: multiply元素上使用div::after有关。这可能会对堆叠顺序产生影响，但我无法确切地说。

jQuery：除1之外的任何不透明度值都表现为0

1 个答案: