1

我的页面有带有背景图像的部分和其他带有白色背景的部分。我的导航文本颜色是白色的。当导航在图像背景上时，可以看到它。当它在白色背景部分上方时，它会消失。

带有图像背景的部分的白色导航

我知道mix-blend-modeCSS 属性。我已经尝试了几乎所有可能的值（参见 CSS Tricks /almanac/properties/m/mix-blend-mode/，因为我显然不能发布两个以上的链接......）。仅在白色导航上产生良好的效果，但对白色上的图像产生不好的效果exclusion。difference

我想要的是导航始终保持白色，除非它位于白色背景上。

我想到了一种 JS 方法，当它检测到背景是白色时，将一个类绑定到导航。这是可能的，因为我所有的白色背景部分都有一个.light类。此解决方案工作正常，但它似乎有点重（资源要求高），因为每次在文档元素上检测到滚动事件时它都会运行：

$(document).scroll(function() {

    var menu = $('#menu');

    current_scroll = $(this).scrollTop() + 40;

    // Placed here because some white sections may vary in height
    var light_sections = $('.section.light');

    var i, start, end;
    for (i = 0; i < light_sections.length; i++) {
        start = $(light_sections[i]).offset().top;
        end = start + $(light_sections[i]).outerHeight();

        if (start < current_scroll && current_scroll < end) {
            $(menu).addClass('dark');
            return true;
        }
    }

    $(menu).removeClass('dark');
});

我喜欢这个mix-blend-mode解决方案，因为它不需要太多资源，但它不适合我的使用，而且我认为它存在跨浏览器支持问题。我喜欢我的解决方案，因为它有效，但可能会减慢页面恕我直言。谁能提出一个更简单的解决方案或告诉我混合模式是否可以解决问题？

Codepen 与我的工作解决方案：http ://codepen.io/anon/pen/bwXVKm

4

0 回答 0