Scroll-Dann-Fix Inhalt

Ein Leser schickte mir ein GIF, das einen coolen Effekt zeigte, den er auf Google auf Mobilgeräten gesehen hatte. (Vermutlich die Homepage, die man sieht, wenn man Chrome auf Android startet?) Es gibt ein Suchfeld in der Mitte der Seite, das mit der Seite scrollt, aber kurz bevor es von der Seite verschwindet, wird es am Header fixiert. Lass uns das behandeln, denn, wissen Sie...

OH: Ich bin ein mobiler Webentwickler, also bekomme ich im Grunde den ganzen Tag Anfragen, damit Inhalte nach etwas Scrollen oben haften.

— Daniel Wilson (@dancwilson) 16. September 2014

Es ist ein cooler Effekt, besonders wenn er dazu dient, die Benutzerfreundlichkeit zu verbessern und nicht, um eine dumme, aufdringliche Werbung zu fixieren. Hier ist das GIF, auf dem ich die Idee basierte. Ein wenig ruckelig, aber die Idee ist da.

Zwei Zustände

Wie die meisten guten Tricks steckt nicht viel dahinter. Alles, was wir tun, ist, uns die zwei verschiedenen möglichen Zustände vorzustellen (und dafür zu gestalten).

1. Suchleiste in ihrer scrollbaren Position
2. Suchleiste in ihrer fixierten Header-Position

Wir wechseln zwischen ihnen, indem wir einfach einen Klassennamen ändern. Es gibt keine Trickserei mit zwei Suchformularen, die sich in verschiedenen Szenarien offenbaren. Das ist gut, denn wir wollen nicht mit dem Synchronisieren herumfummeln. Viel einfacher, nur eines zu bewegen.

Zustand Eins

(Ich werde hier SCSS verwenden, da die Verschachtelung für die Verwaltung von Zuständen schön ist.)

.top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 60px;
}

.search { /* Container just in case we want more than just the search input to come along */
  position: absolute;
  top: 155px;
  left: 20px;
  right: 20px;
  input {
    width: 265px;
    transition: width 0.2s;
    -webkit-appearance: none; /* Autoprefixer doesn't catch this */
  }
}

.top {
  height: 250px; /* Space in here for search */
  padding-top: 40px;
  position: relative;
}

Zustand Zwei

Angenommen, wir haben eine Klasse namens „fix-search“ auf ein Elternelement angewendet.

.top-header {
  ...
  .fix-search & {
    background: #eee;
  }
}

.search { /* Container just in case we want more than just the search input to come along */
  ...
  .fix-search & {
    position: fixed;
    top: 10px;
    input {
      width: 250px;
    }
  }
}

Zustände wechseln

Der Trick hierbei ist, diese Klasse genau im richtigen Moment anzuwenden. In unserer kleinen Demo können wir testen, wann dieser perfekte Moment wäre, und ihn hartkodiert in ein JavaScript einbauen, das auf das Scrollen achtet. Im jQuery-Stil.

var wrap = $("#wrap");

wrap.on("scroll", function(e) {
    
  if (this.scrollTop > 147) {
    wrap.addClass("fix-search");
  } else {
    wrap.removeClass("fix-search");
  }
  
});

Das ist alles, was nötig ist, um zwischen den beiden eingerichteten Zuständen zu wechseln. Wenn die Seite 147 Pixel oder mehr nach unten gescrollt wurde, erhält sie diese Klasse. Wenn nicht, dann nicht. Selbst wenn Sie nach unten gehen und wieder nach oben kommen, verschwindet die Klasse (da diese kleine Funktion bei jedem Scroll-Ereignis aufgerufen wird).

Demo

Siehe den Pen Suchfeld im Inhalt bewegt sich zum fixierten Header von Chris Coyier (@chriscoyier) auf CodePen.

Debouncing

In der großen Tradition, beim Binden eines Events an ein Scroll-Event über Scroll-Debouncing zu sprechen: Sie sollten das Debouncing in Betracht ziehen, wenn Sie Funktionen an Scroll-Events binden, denn wenn Sie es nicht tun, wird es tausendmal aufgerufen und könnte langsam sein.

CSS

Das ist die Art von Sache, die man in reinem CSS machen könnte. Es gibt noch keine guten Lösungen, aber ich bin immer wieder erstaunt über die verrückten Dinge, die Leute mit CSS machen, also werde ich es aktualisieren, wenn etwas Neues kommt.

Vielleicht werden wir eines Tages Scroll-Positions-Media-Queries haben können?

Unterstützung für feste Positionen

Beachten Sie, dass diese Demo auf fester Positionierung basiert, die eine fragwürdige Geschichte auf Mobilgeräten hat. Obwohl ich versucht bin zu sagen, dass sie heutzutage "ziemlich gute" Unterstützung hat, sollten Sie sich selbst ein Urteil bilden. Einige Lektüren.

• Kann ich verwenden… zur festen Positionierung
• Feste Positionierung in mobilen Browsern von Brad Frost
• Probleme mit position: fixed & Scrolling auf iOS von Remy Sharp

Dies ist nur ein (nicht besonders wiederverwendbares) Beispiel

Es gibt viele magische Zahlen in dieser Demo. Immer wenn Sie Höhen einstellen, sollten Warnsignale in Ihrem Gehirn aufleuchten. Das bedeutet nicht, dass Sie es nie tun sollten, es bedeutet nur, dass Sie gewarnt sein sollten. In dieser Demo, wenn das zentrierte Bild im Header seine Höhe ändern würde, würde es ziemlich egal was passieren würde, komisch aussehen. Dies ist keine flexible und fehlerverzeihende Layout-Variante. Selbst wenn Sie den Header so fixieren, dass er nach einer Änderung gut aussieht, hat das JavaScript entsprechende magische Zahlen, wann der Zustand geändert werden soll.

Vielleicht könnte eine Version, die waypoints (oder deren Konzept) verwendet, ein kugelsicheres System schaffen.