1

私のページには、背景画像のあるセクションと白い背景のセクションがあります。私のナビテキストの色は白です。ナビが画像の背景の上にある場合は、それを見ることができます。白地部分を超えると消えます。

画像の背景を持つセクション上の白いナビゲーション

私はmix-blend-modeCSSプロパティを知っています。私はほとんどすべての可能な値を試しました（/almanac/properties/m/mix-blend-mode/どうやら2つ以上のリンクを投稿できないため、CSS Tricksを参照してください...）。ホワイトオーバー ホワイト ナビゲーションでは良い結果が得られますが、ホワイト オーバー イメージでは悪い結果が得られます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