Aaron3219
Senior HTML'ler
Hi Forum,
also wie man einen sticky header erstellt weiß ich. Hier mein Code:
also wie oben im Code hab ich da ein Bild
jetzt möchte ich, wenn ich runterscrolle, dass das Bild z.B. kleiner wird.
Wie mach ich das?
Ich hoffe ihr könnt mir auch diesmal weiterhelfen
also wie man einen sticky header erstellt weiß ich. Hier mein Code:
HTML:
<style>
header{
// set animation
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
header.sticky {
position: fixed;
height: 140px;
width: 100%;
background: rgba(82, 82, 82, 0.8);
}
</style>
<header class="sticky">
<div class="menu-top1">
<img class="" style="float: left; height: 100px; margin: 20px 0 0 20px;" alt="" src="./Files/Mainpage/photo.png">
<ul style="float: right; margin: 30px 300px 0 0;">
<li><a href="">blabla</a></li>
<li><a href="">blabla</a></li>
<li><a href="">blabla</a></li>
<li><a href="">blabla</a></li>
<li><a href="">blabla</a></li>
<li><a href="">blabla</a></li>
<li style="float:right"><a class="active" href="#about">blabla</a></li>
</ul>
</div>
</header>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
</script>
also wie oben im Code hab ich da ein Bild
Code:
<img class="" style="float: left; height: 100px; margin: 20px 0 0 20px;" alt="" src="./Files/Mainpage/photo.png">
jetzt möchte ich, wenn ich runterscrolle, dass das Bild z.B. kleiner wird.
Wie mach ich das?
Ich hoffe ihr könnt mir auch diesmal weiterhelfen