Kopfzeile beim Scrollen nur teilweise fixieren

Question

Sorry, ich wusste nicht wirklich, was ich im Titel ausdrücken soll. Ich möchte, dass mein Header ein großes Bild ist und darunter ein Standard-Header. Wenn Sie nach unten scrollen, möchte ich, dass das Bild nach oben verschwindet, bis die Standard-Kopfzeile oben ist. Ich möchte, dass die Standard-Kopfzeile beim Scrollen nach unten fixiert wird.

----------------------------------- 
|         | 
|    IMAGE    | 
|         | 
----------------------------------- 
|    HEADER    | 
----------------------------------- 
|         | 
|         | 
|    PAGE    | 
|         | 
|         | 
----------------------------------- 

Bisher habe ich den Header und eine seitliche Navigationsleiste arbeiten. Ich weiß nicht einmal, wie ich mich dem Bildteil der Kopfzeile nähern soll. Was ich habe, so weit:

https://jsfiddle.net/kenogo99/q1Lo9qy1/

Ich würde wahrscheinlich ein extra div für das Bild erstellen müssen, aber ich weiß nicht, wie der Header zuerst nach oben zu machen und dann dort bleiben.

Answer 1

Sieht so aus, als hätten Sie vergessen, JQuery in Ihre Geige zu integrieren.

Sie können es hinzufügen, indem Sie auf das Zahnradsymbol im JavaScript-Bereich "Fiddle" klicken und dann JQuery in Frameworks hinzufügen.

Sie können auf JQuery in Ihrem Code verweisen, indem Sie die Variablen $ oder JQuery verwenden. Da JQuery fehlt, wird $ in der Konsole nicht definiert.

Sie sollten immer den Web Inspector verwenden und die Konsole auf Fehler überprüfen. Normalerweise fehlen Abhängigkeiten wie im Screenshot unten eine 'ReferenceError: *Something* is not defined'.

Hoffe das hilft.

Prost und fröhliche Codierung!