HTML:

<nav class="background">
    <h1>Navigation</h1>
</nav>
<main>
    <section id="first-section" class="background"><h1>Section 1</h1></section>
    <section><h1>Section 2</h1></section>
    <section><h1>Section 3</h1></section>
</main>

CSS:

body, h1 {
    margin: 0;
}

nav {
    position: sticky;
    top: 0;
    height: 150px;
}

section {
    height: 300px;
    background-image: url(<Hintergrund>);
}

#first-section {
    background-position-y: -150px;
    transition: background 500ms;
}

.background {
    background-image: url(<Hintergrund>);
}

position: sticky; und top: 0; bewirken, dass die Navigation immer oben am Bildschirm „klebt“.

background-position-y: -150px; verschiebt den Hintergrund nach oben und dient dazu, dass der Hintergrund zwischen der Navigation und dem ersten section-Element durchgehend verläuft.

Mit transition: background 500ms; wird der Hintergrund weich ausgeblendet.

JavaScript:

Mit CSS allein kann man Herunterscrollen nicht erkennen. JavaScript ist deshalb notwendig.

var firstSection = document.getElementById("first-section");

window.onscroll = function() {
    var scrollPosition = document.documentElement.scrollTop;
    if(scrollPosition > 0) {
        firstSection.classList.remove("background");
    } else {
        firstSection.classList.add("background");
    }
};

Mittels document.getElementById("first-section") wird das HTML-Element mit der ID first-section ausgewählt und in die Variable firstSection gespeichert.

window.onscroll = function() { … } definiert eine Funktion, die den Code immer dann ausgeführt wird, wenn auf der Seite gescrollt wird.

document.documentElement.scrollTop gibt an, wie viele Pixel nach unten gescrollt wurde. Wenn der Wert über 0 liegt, wurde gescrollt.

Mit .classList.remove("background") und .classList.add("background") wird die Klasse background vom firstSection-Element entfernt bzw. hinzugefügt.

Anfang der Seite:

Nach dem Herunterscrollen:

Wenn auf der Seite heruntergescrollt wird, wird der Hintergrund (background-Klasse) vom ersten section-Element entfernt, wobei der Hintergrund der Navigation erhalten bleibt.

JSFiddle: https://jsfiddle.net/f7gLuoye/