Ich bin Code für eine Webseite, wo eine große Kopfzeile am Anfang der Seite ist. Diese Kopfzeile enthält die Navigationsleiste, das Logo und den Titel der Website. Sobald der Benutzer mit dem Scrollen beginnt, möchte ich, dass er in eine kleine Kopfzeile mit nur einer Navigationsleiste wechselt, die beim Scrollen des Benutzers oben auf der Seite bleibt. Ich konnte keine Möglichkeit finden, dies online zu tun, und dachte, dass dies für mich und andere Leute interessant sein könnte.Mehrere Header in HTML
Dies ist der große, erste Kopf, mit CSS-Code:
<style>
header {
background-color: #0097A7;
color: #ffffff;
padding: 2%;
text-align: center;
}
h1 {
font-size: 270%;
margin: 2% 0;
}
nav {
background-color: rgba(255, 255, 255, .4);
border-radius: 25px;
width: 50%;
margin-left: auto;
margin-right: auto;
font-family: 'Neuton', serif;
font-weight: bold;
}
nav a {
color: #fff;
display :inline-block;
font-size: 100%;
font-weight: bold;
padding: 1% 4%;
}
nav a:hover {
background-color: rgba(255, 255, 255, .4);
box-sizing: border-box;
border-radius: 25px;
}
</style>
<header>
<h1><img alt="Logo" class="logo" height="50" src="media/logo.png">
Fish & Chips </h1>
<nav>
<a href="index.php">Home</a>
<a href="gallery.php">Gallery</a>
<a href="about.php">About Us</a>
<a href="contact.php">Contact Us</a>
</nav>
</header>
Dies ist der Header Ich möchte wechseln:
<header>
<nav>
<a href="index.php">Home</a>
<a href="gallery.php">Gallery</a>
<a href="about.php">About Us</a>
<a href="contact.php">Contact Us</a>
</nav>
</header>
Dies ist der Code, den ich online gefunden zu beheben die Kopfzeile an den oberen Bildschirmrand
<style>
nav {
position:fixed;
top:0px;
}
</style>
Ich bin mir nicht sicher, wie man zwischen diesen beiden Headern wechseln kann. Ich nehme an, es kann einfach jquery wie:
if (xPos > 0){
switch to small, fixed header
} else{
switch to large header
}
Wo xPos ist, wie weit unten auf der Seite der Benutzer.
Allerdings bin ich mir nicht sicher, wie man das macht und kann es nicht online finden.
Willkommen bei Stack Overflow! SO ist kein kostenloser Codierdienst. Sie müssen versuchen, das Problem selbst zu lösen. Wenn es nicht funktioniert, poste, was du versucht hast, und wir helfen dir, es zu beheben. – Barmar
Hallo, danke für die Antwort! Ich habe versucht, das zu tun, was erklärt, wie ich eine Überschrift erstellen kann, die oben auf der Seite bleiben wird. Wie auch immer, ich weiß immer noch nicht, wie ich zwischen den beiden Headern (dem großen und dem kleinen festen ...) wechseln soll. Danke !! –
Verwenden Sie einige jQuery, um die Klasse von relativ zu fix zu ändern, wenn sich die Position oben auf der Seite befindet. –