Css Navbar design?
Hallo,
Ich habe folgendes problem:
ich bin gerade etwas am herumexperimentieren und möchte gerne bei meiner Website eine Navbar machen welche am anfang mit dem Sector 1 einen Hintergrund haben(durchgehend), wenn ich dann herunterscrolle dann sollte dieses Hintergrundbild nur noch im header sein. Weis jemand zufällig wie man sowas angehen könnte?
2 Antworten
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/
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
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>
es sollte nicht das ganze bild sein sondern nur ein kleiner Ausschnitt