Ich versuche etwas ähnliches zu einem dieser Header zu machen, der verkleinert wird und ein Element hat, wenn die Seite nach unten scrollt. Der Unterschied besteht darin, dass die meisten Header dieser Art, die ich gesehen habe, einen einzigen großen Header mit einer Hintergrundfarbe haben, und mein Client möchte, dass sich das Logo in einem separaten Bereich der Navigationsleiste befindet. Oben gibt es einen leeren Platz mit nur dem Logo, dann gibt es die Nav-Leiste, die eine Hintergrundfarbe hat. Ich versuche also, die Navigationsleiste oben auf Scroll zu halten und das Logo in eine andere Position zu schieben. Ich habe versucht, Animationen und Übergänge, aber es ist immer noch wirklich Scroll Scrolling.Reibungslose Animation eines Headers
Hier ist ein aktueller Code, der jQuery verwendet, um css-Klassen beim Scrollen hinzuzufügen und die Elemente dann anders zu positionieren. Ich benutze tatsächlich Hass und habe ihn nicht in reguläres CSS geändert.
Html:
<header>
<a href="index.php"><img src="images/logo.png" width="170" height="68" /></a>
<nav>
<ol>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="gallery.php">Gallery</a></li>
</ol>
</nav>
</header>
JS:
$(window).scroll(function() {
if ($(this).scrollTop() > 80){
$('nav').addClass("scroll");
$('header img').addClass("logoScroll");
}
else{
$('nav').removeClass("scroll");
$('header img').removeClass("logoScroll");
}
});
SASS:
header{
width: 100%;
img{
margin-left:68%;
}}
nav{
padding:5px;
z-index:2;
background:#571189;
font-size:1.3em;
}
.scroll {
position:fixed;
top:0;
width:100%;
}
.logoScroll{
position:fixed;
top:0;
right:4%;
z-index:3;
zoom:0.6;
transition: all 0.4s ease;
}
Ihr Code funktioniert gut für mich. Hoffe, du hast das jquery-Plugin hinzugefügt und dein '