Javascript 内容随页面滚动，但位于固定位置的侧边栏内（具有阴影效果）

我正在尝试为侧边栏开发以下功能。简言之，侧边栏将有100%的高度，并将绝对定位。里面有内容，应该和页面一起滚动，而侧边栏是固定的。此外，还有一个阴影效果/响应，显示用户是否可以向下或向上滚动。例如，如果有东西可以向下/向上滚动，则在那里显示阴影，如果没有，则不显示阴影。我制作了一个快速的模型，希望它能帮助您了解如果页面被滚动会发生什么：

我用内容和侧边栏做了一个快速的jsfidle，这是我目前所能做的。 我认为这不能仅通过css和html以及跨浏览器工作来实现，所以jQuery解决方案是受欢迎的

HTML

编辑 侧边栏中的“裸心内容”总计不到页面内容的一部分，因此，一旦它到达底部（因此当底部阴影消失时），它应该留在那里，而主内容仍然可以向下滚动。

这仍然有点粗糙，但这是一个开始：

我仔细检查了一下，把它擦得更亮了一点，并处理了一些调整窗口大小的问题

我想这对你会有用：

JS

---

CSS技巧网站上有一篇文章介绍了他们在哪里通过JQuery实现了类似的功能

Wow，实际上正是我想要的！如果内容被动态添加到页面中，它还会工作吗？e、 g.内容无限滚动，但侧边栏中的内容始终是静态的？顺便说一句，只要堆栈溢出允许，我就会奖励赏金。@Ilya我又看了一遍，把它清理了一点。看看更新后的答案。太好了！再过5个小时，直到我可以奖励它，被接受的答案仍然需要工作。。。。在底部添加一个页脚，侧边栏将直接滚动。当它到达页脚时，你能让它停下来吗？也许这就是你需要的？或者，如果我正确理解，如果滚动未结束，您需要显示阴影，如果滚动至底部或顶部-阴影隐藏您将需要js进行双滚动，@apaul34208做得非常好，我只想添加一个真正整洁的滚动阴影CSS唯一解决方案：

<div id="main"> <!-- Demo Content (Scroll down for sidebar) -->
    <!-- Demo content here -->
</div>

<aside id="sidebar">
    <div id="side-content-1"></div>
    <div id="side-content-2"></div>
 </aside>

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;
}

$(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);

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;
}