8

我正在尝试为侧边栏开发以下功能。简而言之，侧边栏将具有 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;
}

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

4

2 回答 2

2

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

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

我认为这对你有用：
更新的工作示例

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;
}
于 2013-06-01T17:50:21.063 回答
0

CSS Tricks 网站有一篇关于Persistent Headers的文章，他们在其中使用一些 JQuery 完成了类似的事情

于 2013-06-01T22:35:11.250 回答