Question

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

white nav over section with image background

我知道mix-blend-mode CSS属性。我已经尝试了几乎所有可能的价值（参见CSS Tricks /almanac/properties/m/mix-blend-mode/，因为我显然无法发布超过两个链接......）。只有exclusion和difference会为白色导航产生良好的白色导航结果，但白色导致图像效果不佳。

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

我想到了一种JS方法，当它检测到背景是白色时将类绑定到nav。这是可能的，因为我的所有白色背景部分都有.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

当背景为白色时更改导航栏颜色

0 个答案: