Inhalt, der sich mit der Seite bewegt, jedoch innerhalb einer fest positionierten Seitenleiste (mit Schattenwirkung)

Question

Ich versuche, die folgende Funktionalität für eine Seitenleiste zu entwickeln. Kurz gesagt, die Seitenleiste wird eine Höhe von 100% haben und absolut positioniert sein. Darin befindet sich Inhalt, der mit der Seite scrollen sollte, während die Seitenleiste fixiert ist. Und zusätzlich gibt es einen Schatteneffekt / eine Reaktion, um dem Benutzer anzuzeigen, ob er nach unten oder nach oben scrollen kann. Zum Beispiel, wenn etwas nach unten / oben gescrollt werden kann, zeige dort einen Schatten an, wenn nicht, zeige keinen Schatten. Ich habe eine schnelle Skizze erstellt, hoffentlich hilft sie Ihnen zu verstehen, was passiert, wenn die Seite gescrollt wird:

Ich habe ein schnelles jsfiddle mit Inhalt und Seitenleiste erstellt, das ist so weit wie ich momentan kommen kann. http://jsfiddle.net/cJGVJ/3/ Ich gehe davon aus, dass dies nur mit CSS und HTML nicht erreicht werden kann und browserübergreifend funktioniert, daher sind jQuery-Lösungen willkommen.

HTML

CSS

body {
    background: #f3f3f3;
    margin: 0;
    padding: 0;
}

#page-wrapper {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}

#sidebar {
    width: 30%;
    float: left;
    background: #ffffff;
    padding: 10px;
    height: 100%;
    position: fixed;
}

#main {
    width: 60%;
    float: right;
}

#side-content-1, #side-content-2 {
    height: 400px;
}

#side-content-1 {
    background: red;
    opacity: 0.4;
}

#side-content-2 {
    background: green;
    opacity: 0.4;
    margin-top: 10px;
}

EDIT Bitte beachten Sie, dass der Inhalt in der Seitenleiste weniger als der Inhalt einer Seite ausmacht, sodass er beim Erreichen des unteren Endes (wenn der untere Schatten verschwindet) dort bleiben sollte, während der Hauptinhalt immer noch nach unten gescrollt werden kann.

Answer 1

Dies ist immer noch etwas grob, aber es ist ein Anfang:

Ich habe es noch etwas überarbeitet und mich um einige Probleme beim Ändern der Fenstergröße gekümmert.

Ich denke, das wird für dich funktionieren:
Aktuelles Arbeitsbeispiel

JS

$(window).scroll(function () {
    var y = $(window).scrollTop();
    var x = $(window).scrollTop() + $(window).height();
    var s = $('#sidebar').height();
    var o = $('#side-content-1').offset().top;
    var q = $('#side-content-1').offset().top + $('#side-content-1').height();
    var u = $('#side-content-2').offset().top;
    if (x > s) {
        $('#sidebar').css({
            'position': 'fixed',
                'bottom': '0',
                'width': '27%'
        });
        $('#bottomShadow').hide();
    }
    if (x < s) {
        $('#sidebar').css({
            'position': 'static',
                'width': '30%'
        });
        $('#bottomShadow').show();
    }
    if (y > o) {
        $('#topShadow').show().css({
            'position': 'fixed',
                'top': '-2px'
        });
    }
    if (y < o) {
        $('#topShadow').hide();
    }
    if (y > q - 4 && y < q + 10) {
        $('#topShadow').hide();
    }
    if (x > u - 10 && x < u + 4) {
        $('#bottomShadow').hide();
    }

});
var shadow = (function () {
    $('#topShadow, #bottomShadow').width($('#sidebar').width());
});

$(window).resize(shadow);
$(document).ready(shadow);

CSS

body {
    background: #f3f3f3;
    margin: 0;
    padding: 0;
}
#page-wrapper {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}
#sidebar {
    width: 30%;
    float:left;
    background: #ffffff;
    padding: 10px;
}
#main {
    width: 60%;
    float: right;
}
#side-content-1, #side-content-2 {
    height: 400px;
}
#side-content-1 {
    background: red;
    opacity: 0.4;
}
#side-content-2 {
    background: green;
    opacity: 0.4;
    margin-top: 10px;
}
#topShadow {
    display:none;
    height:2px;
    box-shadow:0px 5px 4px #000;
}
#bottomShadow {
    position:fixed;
    bottom:-3px;
    height:2px;
    width:99%;
    box-shadow:0px -5px 4px #000;
}

Answer 2

Die CSS Tricks-Website hat einen Artikel über Persistent Headers, in dem sie mit etwas JQuery etwas Ähnliches erreichen.