Die gängigen Kandidaten:
An dem Beispiel für "sticky" kannst Du sehr gut erkennen, wie es funktioniert.
Ich habe aber auf die Schnelle keine Quelle gefunden, die einen ganz wichtigen Aspekt heraus stellt: Durch "sticky" Positionierung wird ein Element nicht aus dem Fluss genommen, d. h. die Elemente danach verschwinden nicht wie bei "fixed" darunter. Sondern erst beim Scrollen.
Ich meinte, dass Du das Bild aus dem Header löschst und außerhalb darunter anordnest, also so:
<body>
<header>
<nav class="navigation">
<!-- Logo -->
<div class="logo">
<!-- <h1>LOGO</h1> -->
<img class="navigation-logo" src="images/logo.png" alt="Logo" width="50" height="auto">
</div>
<!-- Navigation -->
<ul class="menu-list">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
<div class="humbarger">
<div class="bar"></div>
<div class="bar2 bar"></div>
<div class="bar"></div>
</div>
</nav>
</header>
<div class="bild">
<img src="images/theke2.jpg">
</div>
<section id="welcome">
Alles anzeigen
Und jetzt den Header sticky und das Bild fixed positionieren.