Scroll/Follow Sidebar, Multiple Techniken

Wir haben heute ein wirklich einfaches Konzept, Leute! Eine Seitenleiste, die beim Scrollen einer Seite "folgt". Es gibt verschiedene Möglichkeiten, dies zu erreichen. Wir werden zwei behandeln: CSS und JavaScript (jQuery) mit einem Bonus-CSS-Trick.

Demo anzeigen   Dateien herunterladen

CSS

Der einfachste Weg, dies zu handhaben, ist die Verwendung der CSS-Fixed-Positionierung. Unsere Seitenleiste befindet sich in einem div mit der ID #page-wrap mit relativer Positionierung, sodass die Seitenleiste dort platziert wird. Dann verschieben wir sie mit einem Margin an die richtige Stelle.

#page-wrap { 
  width: 600px; 
  margin: 15px auto; 
  position: relative; 
}

#sidebar { 
  width: 190px; 
  position: fixed; 
  margin-left: 410px; 
}

Mit dieser Technik bleibt die Seitenleiste beim Scrollen auf der Seite fest an ihrem Platz.

jQuery

Wenn wir JavaScript verwenden, können wir messen, wie weit der Benutzer das Fenster heruntergescrollt hat, nachdem ein Fenster.scroll-Ereignis ausgelöst wurde. Wenn dieser Abstand größer ist als die anfängliche obere Position der Seitenleiste, können wir den oberen Rand der Seitenleiste anpassen, um sie in den sichtbaren Bereich zu schieben.

Optimiert von Doug Neiner

$(function() {

    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
    
});

Hier gibt es keinen besonderen Vorteil, außer dem coolen animierten Effekt, der sicherlich Aufmerksamkeit erregt.

Bonus „Reveal“-Technik

Auf Tim Van Dammes Maxvoltar.com haben einzelne Blogbeiträge eine spezielle Seitenleiste mit einem unterhaltsamen „Reveal“-Effekt, wenn die Seite nach unten gescrollt wird.

Der Trick besteht darin, einen Header-Bereich mit einem einfarbigen Hintergrund über der Seitenleiste zu haben, die darunter gezogen wird. Sie könnten dafür einen negativen oberen Rand verwenden oder dentopPositionierungswert anpassen. Dann wird ein transparentes weißes Verblassungsbild oben auf der Seitenleiste platziert und ebenfalls per z-index darübergelegt. Wenn sich die Oberseite der Seitenleiste, die vom Header verdeckt wird, nach unten in Sichtweite schiebt, „enthüllt“ das weiße Verblassungsbild sie.

/* Negative top margin on sidebar pulls up header under title-area */
#sidebar { 
  width: 190px; 
  position: fixed; 
  margin: -135px 0 0 410px; 
}

/* Title area kept above all with z-index */
#title-area { 
  background: white; 
  position: relative; 
  z-index: 3000; 
}

/* white-fade image */
#reveal { 
  position: absolute; 
  right: 0; 
  bottom: -20px; 
}

Bedenken

Bei all diesen Techniken haben wir es im Wesentlichen mit fester Positionierung zu tun. Eine „echte“ feste Positionierung von Inhalten (im Gegensatz zu z. B. einem Hintergrundbild) ist ein leicht gefährliches Gebiet. Wir müssen sehr sicher sein, dass die Inhalte, die wir mit fester Positionierung versehen, niemals höher sind als der sichtbare Bereich selbst eines sehr kleinen Monitors. Wenn die Höhe diesen sichtbaren Bereich überschreitet, wären sie vollständig verborgen und unzugänglich, über den Rand des Browserfensters hinaus. Bei Elementen, die nicht fest positioniert sind, würde dieser Überhang eine Scrollleiste auslösen, feste Positionierungselemente tun dies nicht.

Cross-Browser Hoo-Hah

Das sollte in „allen“ Browsern funktionieren. Für IE 6 und IE 7 habe ich einige bedingte Kommentare für zusätzliches CSS hinzugefügt, damit sie sich richtig verhalten. Schauen Sie sich gerne den Quellcode in der Demo an, um das zu überprüfen. Dies ist eine nette Demo als Referenz für feste Positionierung in IE 6 (im Grunde müssen Sie einen zusätzlichen äußeren Container für die Seite haben und absolute Positionierung verwenden, um es zu simulieren).

MooTools

David Walsh beschäftigt sich mit einer MooTools-Version der Scrolling Sidebar.

jQuery-Plugin

Es gibt auch ein jQuery-Plugin im Repository, das dasselbe tut, mit dem zusätzlichen coolen Feature, dass es vor dem Footer stoppt.

Dieser Link ist jetzt defekt, aber hier ist eine große Zusammenfassung von jQuery-Plugins, die die gleiche Art von Ding tun.