javascript - 随页面滚动的内容，但位于固定位置的侧边栏内(具有阴影效果)

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