1

我有以下 JSFIDDLE来演示我正在使用的页面布局，但很难实现我想要的。

如果将主要内容一直滚动到底部，您将看到侧边栏的底部与页脚的顶部相接。 那是应该永远看起来的样子。但是，如果您调整大小或滚动，您会发现并非如此。

经过几天的 css 摆弄，我得出结论，这只能用 js 完成。请提供一个有效的小提琴，特别是如果您声称它可以像其他人在我的其他问题中那样仅使用 CSS 来完成，而我无法获得任何工作答案。所有提出的答案的问题都position:fixed被删除了，侧边栏随着主要内容滚动，这是不应该发生的。

请帮助达到预期的效果

4

1 回答 1

1

更新：

这显然不能仅在 CSS 上实现，这是一个 jQuery 解决方案。

var vh = $("body").height() - $("footer").height();
var sh = $("#side").height();

$(window).resize(function() {
    vh = $("body").height() - $("footer").height();
    sh = $("#side").height();
});

$(document).scroll(function() {
    var vs = $(document).scrollTop() + sh + $("footer").height();

    if(vs < vh)
        $("#side").css("bottom", "0px");
    else
        $("#side").css("bottom", (vs - vh) + "px");
});

这是一个用于测试的jsFiddle。

于 2013-02-23T20:26:10.423 回答