如何在CSS/JS中创建固定/粘性侧边栏？

Question

我正在尝试创建一个包含主要内容区域和侧边栏的网站,类似Stack Overflow上的内容.目标是当您向下滚动时,侧边栏保持可见.

我见过两种方法:

1. position:fixed;
2. 使用DOM进行JavaScript操作

方法没有.1,据我所知,当视口小于侧边栏内容时会出现问题所以我想这是不能可靠使用的,我见过的JavaScript脚本通常是动画的或者通常是"慢"的(你可以看到)每次滚动后都会重新绘制).

有人能指出一个不会受上述问题影响的JavScript库/ CSS方法吗？

编辑:一个例子是这个页面, 但侧边栏没有动画时粘在顶部,并且当侧边栏高于内容/视口时正确处理情况.

Answer 1

我不喜欢沉重的JS解决方案,所以要问的重要的是 - 首选兼容性.在IE8 +中,它可以代替

var $window = $(window),
    $sidebar = $(sidebar);

$window.on('resize', function(){
    $sidebar.height($window.innerHeight());
});

$window.resize();

做这样的事情(纯CSS解决方案):

#sidebar {
    position: fixed;
    left: 0; /* or right */
    top: 0;
    bottom: 0;
    overflow: auto;
}

当您同时具有顶部和底部/左侧和右侧值时,框将被拉伸.(JSFiddle演示)

Answer 2

您可以捕获客户端窗口的高度并将其提供给侧边栏，如下所示：

\n\n

var sidebarHeight = $(window).innerHeight();\n\n$(\'#sidebar\')\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b.css(\'height\',sidebarHeight);\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\n

\n\n

使用正确的侧边栏 CSS：

\n\n

#sidebar {\n    position: fixed;\n    right: 0;\n    top: 0;\n    width: 200px;\n    overflow: hidden;\n}\n

\n\n

这是一个正在运行的 JSFiddle。

\n\n

您还可以监视窗口大小调整，以避免调整大小时出现混乱:)这是使用 jQuery 的方法

\n\n

祝你好运

\n