Css Navbar design?

2 Antworten

Verelat777
28.06.2023, 21:22

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:

Bild zum Beitrag

Nach dem Herunterscrollen:

Bild zum Beitrag

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/
Woher ich das weiß:Hobby
- (Computer, Webseite, HTML) - (Computer, Webseite, HTML)
EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, Webseite
27.06.2023, 19:25
wenn ich dann herunterscrolle dann sollte dieses Hintergrundbild nur noch im header sein

Wie soll denn ein Bild, das über den gesamten Hintergrund (des body?) geht, in einen Header passen? Um welches Bild geht es?

Alex
informatikCo 
Fragesteller
 27.06.2023, 19:26

es sollte nicht das ganze bild sein sondern nur ein kleiner Ausschnitt

0
EinAlexander  27.06.2023, 19:37
@informatikCo
es sollte nicht das ganze bild sein sondern nur ein kleiner Ausschnitt
<!doctype html>
<title>Beispiel</title>
<style>
body {
margin:0
}
header {
    line-height:5em;
    box-shadow:0 0 10px black;
    position:fixed;
    top:0;
    width:100vW;
    background: url(bg02.jpg) ;
    background-size:cover
}    
section {
  background: url(bg02.jpg);
  background-size:cover;
  height:10em
}  
</style>
<header>
hello world
</header>
<section>
</section>
1