Div ab bestimmter Position einblenden

[robbieW]

Hallo Freunde,

folgende Situation.

Ich habe eine Website bei der oben ein Menü ist (schwarz), ich möchte, dass dieses Menü ab einer bestimmten Position durch ein weißes Menü ersetzt wird.

Alles soll gleich bleiben, nur das Menü soll die Farbe ändern und dann immer sichtbar bleiben.

Leider finde ich nichts was mir wirklich weiterhilft. Ich weiss das gibt es Möglichkeiten mit iquery etc. ich habe auch was gefunden aber dieses funktioniert nicht.

  $(document).ready(function() {
    var myPosY;
    $(window).bind( 'scroll', function() {
        myPosY = $(window).scrollTop();
        if ( myPosY >= 100 && $('#menu-black').hasClass('inactive') ) {
            $('#menu-black').removeClass('inactive');
            $('#menü-black').addClass('active');
            $('#menu-black').fadeIn();
          
        }
        else if ( myPosY < 100 && $('#menu-black').hasClass('active') ) {
            $('#menu-white').removeClass('active');
            $('#menu-white').addClass('inactive');
            $('#menu-white').fadeOut();
        }
    });
});

Ich blick das leider nicht. Kann mir jemanden helfen oder kennt jemand eine Seite bei der man dies nachlesen kann.?

 

[timmy38233]

Wie sieht denn Dein Code (HTML und CSS) für das Menü und das umliegende Element aus?

Und was soll alles geändert werden?
Schriftfarbe, Hoverfarben, Hintergrundfarbe, …?

 

[robbieW]

Das ist nur ein Versuch:

<div id="menu-black">Menü</div>
<div id="menu-white">WeissMenü</div>
<div id="kontent">konten</div>

Menü Black soll beim Start oben sein und wenn man runter scrollt soll das weiße Menü oben einblenden und stehen bleiben.

CSS

#menu-black {

    margin: auto;
    width: 100%;
    height:60px;
    background: #000;
}
   
#menu-white {
    width: 100%;
    height:60px;
    color: #000;
}


#kontent {
    height: 2000px;

}

 

[bezierkurve]

Und was genau funktioniert nicht? Was sagt JS-Konsole/Debugger?

 

[robbieW]

Naja es geht nicht. Es sind beide divs zu sehen und beide scrollen weg.

 

[timmy38233]

Wofür sind denn die Klassen active und inactive?
Wenn Du nur mit fadeOut und fadeIn arbeitest, brauchst Du egt keine weiteren Klassen.

(Und Du hast in deinem JavaScript $('#menü-black…') stehen… da sollte ein u hin )

 

[bezierkurve]

Was sagt JS-Konsole/Debugger?

...???

 

[timmy38233]

Die wird wahrscheinlich nix sagen, weil der Code an sich korrekt ist… (Ausser vllt dass die Funktion $ nicht deklariert ist, weil es evtl Konflikte mit anderen Frameworks gibt)

Ansonsten sollte es hiermit egt schon klappen:

<script>
  jQuery(document).ready(function() {
    var myPosY;
    jQuery(window).bind( 'scroll', function() {
        myPosY = jQuery(window).scrollTop();
        if ( myPosY >= 150) {
            jQuery('#menu-white').fadeIn();
            jQuery('#menu-black').fadeOut();
        }
    });
});
</script>

Wichtig ist, dass Du #menu-white dann vorher ausblendest (per CSS mit display: none).

Und damit die Menüs auch da bleiben wo sie sind wenn man scrollt musst Du ihnen zusätzlich per CSS position: fixed mitgeben. (zumindest wenn man das nicht auch noch über Javascript realisieren möchte)

 

[robbieW]

Das funktioniert. DANKE!

Gibt es noch die Möglichkeit dies aus wieder ausblenden zu lassen wenn man wieder hoch scrollt? Also so das dann wieder das schwarze Menü kommt.

 

[timmy38233]

Einfach hinter dem if { } Block noch ein

else {
    jQuery('#menu-black').fadeIn();
    jQuery('#menu-white').fadeOut();
}

einfügen.

(Hinweis: mit dieser einfach umgesetzten Lösung "flackert" das Menü, wenn Du schnell hoch und runter scrollst.)

 

[robbieW]

Wenn ich das hinter if eingebe, dann blinkt es wie ein Alarm?

  jQuery(document).ready(function() {
    var myPosY;
    jQuery(window).bind( 'scroll', function() {
        myPosY = jQuery(window).scrollTop();
        if ( myPosY >= 550) {
                jQuery('#menu-black').fadeIn();
    jQuery('#menu-white').fadeOut();
            jQuery('#menu-white').fadeIn();
            jQuery('#menu-black').fadeOut();
        }
    });
});

 

[timmy38233]

Da fehlt ja auch ein else

jQuery(document).ready(function() {
    var myPosY;
    jQuery(window).bind( 'scroll', function() {
        myPosY = jQuery(window).scrollTop();
        if ( myPosY >= 150) {
            jQuery('#menu-white').fadeIn();
            jQuery('#menu-black').fadeOut();
        } else {
            jQuery('#menu-black').fadeIn();
            jQuery('#menu-white').fadeOut();
        }
    });
});

 

[robbieW]

VIELEN DANK!