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

Question

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

我用内容和侧边栏快速 jsfidle ，这是我目前所能得到的。 http://jsfiddle.net/cJGVJ/3/ 我认为只有使用css和html并且跨浏览器才能实现这一点，所以欢迎使用jQuery解决方案。

HTML     

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

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

修改 请记住，侧边栏中的内容总和少于一个页面内容，所以一旦它到达底部（所以当底部阴影消失时）它应该保持在那里，而主要内容仍然可以向下滚动。

Answer 1

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

我仔细检查了一下，并处理了一些窗口调整问题。

我认为这对你有用：
的 Updated Working Example

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

CSS Tricks网站上有一篇关于Persistent Headers的文章，他们用一些JQuery来完成类似的东西