1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

[ERLEDIGT] Sticky Header - Grafik soll beim Scrollen skalieren

Dieses Thema im Forum "JavaScript" wurde erstellt von Aaron3219, 8 Januar 2017.

  1. Aaron3219

    Aaron3219 Mitglied

    Registriert seit:
    6 Oktober 2015
    Beiträge:
    161
    Punkte für Erfolge:
    18
    Hi Forum,

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

    HTML:
    1.  
    2. <style>                          
    3.             header{    
    4.      
    5.                 // set animation
    6.                 -webkit-transition: all 0.4s ease;
    7.                 transition: all 0.4s ease;
    8.             }
    9.        
    10.             header.sticky {
    11.                 position: fixed;
    12.                 height: 140px;
    13.                 width: 100%;
    14.                 background: rgba(82, 82, 82, 0.8);
    15.             }
    16.  
    17. <header class="sticky">
    18.                     <div class="menu-top1">
    19.                         <img class="" style="float: left; height: 100px; margin: 20px 0 0 20px;" alt=""         src="./Files/Mainpage/photo.png">
    20.                    
    21.                         <ul style="float: right; margin: 30px 300px 0 0;">
    22.                             <li><a href="">blabla</a></li>
    23.                             <li><a href="">blabla</a></li>
    24.                             <li><a href="">blabla</a></li>
    25.                             <li><a href="">blabla</a></li>
    26.                             <li><a href="">blabla</a></li>
    27.                             <li><a href="">blabla</a></li>
    28.                             <li style="float:right"><a class="active" href="#about">blabla</a></li>
    29.                         </ul>                  
    30.                      </div>
    31.                 </header>
    32.  
    33.  
    34.                     $(window).scroll(function() {
    35.                         if ($(this).scrollTop() > 1){
    36.                             $('header').addClass("sticky");
    37.                         }
    38.                         else{
    39.                             $('header').removeClass("sticky");
    40.                         }
    41.                     });
    42.  

    also wie oben im Code hab ich da ein Bild
    Code (text):
    1.  
    2. <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:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. jappi00

    jappi00 Mitglied

    Registriert seit:
    7 Januar 2015
    Beiträge:
    123
    Punkte für Erfolge:
    18
    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. }
    5.  
     
  3. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    280
    Punkte für Erfolge:
    28
    Code (text):
    1. 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?
     
    jappi00 gefällt das.
  4. jappi00

    jappi00 Mitglied

    Registriert seit:
    7 Januar 2015
    Beiträge:
    123
    Punkte für Erfolge:
    18
    Ich denke das sonst der Inhalt der Seite überlappt wird wobei man das auch besser lösen kann :D
     
  5. Aaron3219

    Aaron3219 Mitglied

    Registriert seit:
    6 Oktober 2015
    Beiträge:
    161
    Punkte für Erfolge:
    18
    Danke hat funktioniert