[ERLEDIGT] Sticky Header - Grafik soll beim Scrollen skalieren

[Aaron3219]

Hi Forum,

also wie man einen sticky header erstellt weiß ich. Hier mein Code:

<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

<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

 

[jappi00]

Das kannst du doch einfach über die Klasse sticky machen?

(nicht getestet muss ohne Syntax Fehler funktionieren)

.sticky > div > img {
height: 50px;
}

 

[jappi00]

if ($(this).scrollTop() > 1){

Was ich dabei nicht ganz verstehe: Wenn man nur um zwei Pixel scrollen muss, um den Header sticky zu machen, kann man ihn doch gleich statisch fixieren?

Ich denke das sonst der Inhalt der Seite überlappt wird wobei man das auch besser lösen kann

 

[Aaron3219]

Das kannst du doch einfach über die Klasse sticky machen?

(nicht getestet muss ohne Syntax Fehler funktionieren)
HTML:

1. 
   
2. .sticky > div > img {
3. height: 50px;
4. }

Danke hat funktioniert