Header soll sich ändern, wenn der User nach unten Scrollt

Hallo,

ich bin auf der Suche nach einer ganz speziellen Funktion, bin aber bis dato noch nicht fündig geworden.

Folgendes habe ich. Ich hab einen Header mit Hintergrundgrafik, einem Logo und einem Menü darin.

Auf der Startseite soll aber das Logo erst erscheinen, wenn z.B. über 200 px nach unten gescrollt ist. Auch der Hintergrund soll sich erst ändern, nachdem der User nach unten gescrollt hat.
Lediglich das Menü, soll immer gleich stehen bleiben.

Ich hoffe, ich habe mich verständlich ausgedrückt. Leider hab ich auch noch keine HP diesbezüglich gefunden.

Bitte um hilfe

Das lässt sich doch mit zb jquery realisieren. Oder verstehe ich die frage falsch?



Ist nur mal ein beispiel:

Code:

---


  $(window).scroll(function(){
     
          if ($(this).scrollTop() > 200) {
                $( '#deinLogo' ).css("display", "block");           
              }
 
        });

---

Mit jquery lässt sich das sicherlich lösen.

Es ist bei mir so: ich hab einen Header und darin hab ich für jede Seite ein eigenes Hintergrundbild. Auch ein Logo hab ich eingebaut und auch das Menü.

Es soll so sein, dass nur auf der Startseite das Menü angezeigt werden soll und erst wenn ich scrolle >200 (z.B) soll das Logo und auch der Hintergrund eingeblenet werden. Der Header ist fixiert am oberen Bildschirmrand.

Das soll aber nur bei der Startseite so sein. Bei allen anderen Seiten passt mir das Logo schon mit dem Hintergrundbild.

Ich hab's fast. So hab ich jetzt den Code geändert:

Code:

---

$(window).scroll(function(){
          if ($(this).scrollTop() > 700) {
                $( '#menu_logo' ).css("display", "block");
                $( '.mod_pageImage' ).css("display", "block");
    }
    else {
              $( '#menu_logo' ).css("display", "none");
              $( '.mod_pageImage' ).css("display", "none");
    }
});

---

Leider wird dieser auf jeder Seite angewendet und wenn ich die Startseite aufrufe, sehe ich den Header mit Hintergrund und Logo. Erst wenn ich anfange zu scrollen, verschwindet dieser und erscheint dann wieder nach 700px.

Wie gesagt, dies soll nur auf meiner "home"-Seite funktionieren und auch nicht ersichtlich sein, wenn ich die Seite aufrufe

Setze die entsprechenden display: none; doch direkt im CSS. Alles das, was du in ungescrolltem Zustand sehen willst oder auch nicht, würde ich im CSS setzen. Denn dein Skript greift ja erst ein wenn gescrollt wird. Um das auf eine Seite zu beschränken, bietet es sich doch eigentlich an, der Seite eine body-Klasse (z.B. "startseite" oder noch besser was Sinnvolles, was die Funktion beschreibt) zu geben und diese dann im Skript mit abzuprüfen. Also im Skript mit in den Selektor ...

Code:

---

...
                        $( '.startseite #menu_logo' ).css("display", "block");
                        $( '.startseite .mod_pageImage' ).css("display", "block");
...

---

Diese Klasse kannst du dann auch im CSS benutzen, um Hintergrundbild und Logo auf der Startseite auszublenden.

Spitze, danke für den Tipp.

Aber ich muss trotzdem ein else einbauen, da sonst auf der Startseite das Headerbild und das Logo darin bestehen bleiben, wenn ich von unten wieder nach oben scrolle.

Der Rest funktioniert so

https://jsfiddle.net/socke/h7g8gh72/7/

Bitte nicht erschlagen, ich hab es mal so runter getippt.

hm, ein weicher übergang wär sicherlich schön, bekomme es aber nicht hin.

Weiters musste ich wirklick "else" einbauen, denn auch wenn ich anstelle von else ein if einsetze, bleibt das eingeblendete Logo stehen und verschwindet nicht.

Hier mein ganzer Code

Code:

---

<script>
$( document ).ready(function() {
        $(window).scroll(function(){
                  if ($(this).scrollTop() > 825) {
                          $( '.home_menu .menu_logo').css("display", "block");
                        $( '.home_menu .mod_pageImage' ).css("display", "block");
                        $( '.home_menu .logo_startseite' ).css("display", "none");
            }
            else {
                    $( '.home_menu .menu_logo').css("display", "none");
                        $( '.home_menu .mod_pageImage' ).css("display", "none");
                        $( '.home_menu .logo_startseite' ).css("display", "block");
            }
        });
});
</script>

---

hab nun ein FadeIn und FadeOut eingebaut. Funktioniert prima:

Code:

---

                  if ($(this).scrollTop() > 825) {
                          $( '.home_menu .menu_logo').fadeIn(800);
                        $( '.home_menu .mod_pageImage' ).fadeIn(800);
                        $( '.home_menu .logo_startseite' ).fadeOut(500);
            }
            else {
                    $( '.home_menu .menu_logo').fadeOut(800);
                        $( '.home_menu .mod_pageImage' ).fadeOut(800);
                        $( '.home_menu .logo_startseite' ).fadeIn(800);
            }

---