Fixe Kopfzeile mit Animation

vorige Präsentation: Formulardaten Prüfen | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Langsam Scrollen

Beim Scrollen einer Webseite soll der Header fix am oberen Rand des Fenster bleiben.

In folgendem Bild sind drei Zustände beim Scrollen untereinander abgebildet:

“Fixed Position” mit CSS

header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  /* ... */
  color: #fff;
  padding: 35px 100px 0;
}

Klasse Vorbereiten

header.shrunk {
  height: 70px;
  background-color: black;
  padding: 0 100px 0;  
}

Transition vorbereiten

header {
  /* ... */

  will-change: background-color;
  will-change: padding;
  
  transition: padding 2s;  
  transition: background-color 2s;  
}

Was ist Scrollen?

  window.pageYOffset

Scroll Event behandeln

  function set_header() {
    if ( window.pageYOffset >= 120 ) {
      $('header').addClass('shrunk');
    }
    else {
      $('header').removeClass('shrunk');
    }    
  }

  $(window).scroll(set_header);  

Fixe Kopfzeile mit Animation

vorige Präsentation: Formulardaten Prüfen | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Langsam Scrollen