Ändern Sie die Schriftfarbe auf Blättern basiert auf einem div

Ich bin derzeit auf der Kodierung eines einfachen MENÜ-button, der fest in der oberen rechten Ecke des Bildschirms.

Mit dem text es ist normalerweise Schwarz, aber ich möchte in der Lage sein, um den text zu ändern, um Weiße, wenn es innerhalb eines bestimmten Div-Element auf einer Seite, so ist es immer noch sichtbar auf dem dunklen hintergrund Bilder.

Hatte ich zwei .CSS-Klassen und versucht, Sie zu wechseln, auf Blättern, aber ich kann nicht es herausfinden.

Jemand weiß, wie kann ich dieses Ergebnis erzielen?

HTML

  <div class="NavigationButton menu_white">
    MENU
  </div>

CSS

.NavigationButton {
 position: fixed;
 top: 5%;
 right: 5%;
 z-index: 99999;
 font-family: neuzeit-grotesk, sans-serif;
 font-weight: 700;
 color: inherit;
}

.menu_white {
 color: #fff;
}

.menu_black {
 color: #000;
}

(Nicht Meine Website) Beispiel-Website: http://flavinsky.com/home/amaio

Nur ohne die snap Blättern

Dank

  • Zeig uns deinen code.
  • Sieht, wie seine Arbeit?
  • Das ist nicht meine site
InformationsquelleAutor MAGiK ARtS | 2017-07-20



2 Replies
  1. 1

    Können Sie jQuery verwenden, um die scroll-position und schaltet die Klassen, basierend auf dem dunklen hintergrund-element ist. Hier ist ein Beispiel

    $(document).ready(function(){
        $(window).scroll(function(){
        var light_pos = $('#white_div').offset().top;
        var light_height = $('#white_div').height();
        var menu_pos = $('.NavigationButton').offset().top;
        var scroll = $(window).scrollTop();
    
        if(menu_pos > light_pos && menu_pos < (light_pos + light_height)) {
            $('.NavigationButton').addClass('menu_black');
          $('.NavigationButton').removeClass('menu_white');
        }
        else {
            $('.NavigationButton').removeClass('menu_black');
          $('.NavigationButton').addClass('menu_white');
        }
    
      })
    })

    und hier ist eine funktionierende Geige https://jsfiddle.net/atqkuwhs/

    • Hallo, das funktioniert – aber wie füge ich mehrere Seiten? Ich bin mit einer Plattform, die nicht lassen Sie mich legen Sie eine Klasse, die auf den Seiten der Website, leider…
  2. 0

    Eine mögliche Lösung ist, um den offset der div und das Menü von der Spitze der Seite und wenden Sie Ihre gewünschten änderungen, sobald Sie sich überschneiden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.