• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Sticky Header - Grafik soll beim Scrollen skalieren

Aaron3219

Senior HTML'ler
Hi Forum,

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
 
Werbung:
Das kannst du doch einfach über die Klasse sticky machen?

(nicht getestet muss ohne Syntax Fehler funktionieren)
HTML:
.sticky > div > img {
height: 50px;
}
 
Werbung:
Zurück
Oben