Sticky Header - Grafik soll beim Scrollen skalieren

html.de-Forum JavaScript
1

Hi Forum,

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

[HTML]

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); } 
                    <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>

[/HTML]

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

2

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

(nicht getestet muss ohne Syntax Fehler funktionieren)
[html]
.sticky > div > img {
height: 50px;
}
[/html]

3

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

4

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

(nicht getestet muss ohne Syntax Fehler funktionieren)
HTML:
[ol]

[li].sticky > div > img {[/li][li]height: 50px;[/li][li]}[/li][/ol]

Danke hat funktioniert