Inhalt, der mit der Seite blättert, sich aber innerhalb einer fest positionierten Seitenleiste befindet (mit Schatteneffekt)

Ich versuche, folgende Funktionalität für eine Sidebar zu entwickeln. Kurz gesagt, Sidebar wird 100% Höhe haben und absolut positioniert sein. Darin befindet sich Inhalt, der mit der Seite blättern soll, während die Seitenleiste fest ist. Und als Zusatz gibt es einen Schatteneffekt / eine Antwort, um dem Benutzer zu zeigen, ob er nach unten oder oben scrollen kann. Also zum Beispiel, wenn es etwas gibt, das runtergerollt werden kann / Schatten nach oben zeigen, wenn nicht, zeige Schatten nicht. Ich habe ein schnelles Modell erstellt, hoffentlich hilft es dir zu verstehen, was passiert, wenn die Seite gescrollt wird:

Ich habe eine schnelle jsfidle mit Inhalt und Sidebar gemacht, das ist soweit ich im Moment kann. Ссылка Ich nehme an, dass dies nicht nur mit CSS und HTML erreicht werden kann und Cross-Browser funktioniert, so dass jQuery-Lösungen willkommen sind.

HTML     

CSS

BEARBEITEN Denken Sie daran, dass der Inhalt in der Seitenleiste weniger als einen Seiteninhalt umfasst. Sobald er den unteren Rand erreicht (also wenn der untere Schatten verschwindet), sollte er dort bleiben, während der Hauptinhalt noch gescrollt werden kann.