CSS:固定位置的侧边栏被切断

Question

我的网站有一个侧边栏，里面有很多东西——太多了，浏览器视口(viewport)的高度必须至少为 1020 像素才能看到所有内容而无需滚动(当然，除非你缩小) .

我希望侧边栏的位置固定，这样当您浏览包含大量内容的页面时，侧边栏在您滚动时保持在同一位置。这很容易实现:

div#Sidebar {
    position: fixed;
}

只要浏览器最大化，这在我的电脑上运行良好，因为我的显示器以 1920 x 1200 运行。但是如果我调整浏览器窗口的大小，边栏就会被截断。当我滚动浏览页面内容时，我可以看到页面的所有内容，但由于其位置固定，边栏仍然被截断。所以看来我只有两个选择:

1. 使侧边栏的位置不固定(不好)，但允许用户能够看到所有侧边栏(好)。

2. 固定边栏的位置(好)，但不要让用户能够看到所有的边栏(坏)。

有没有办法结合这两个选项？

Answer 1

您可以在 javascript 中进行测试。在纯 javascript 中，或使用 jQuery(会容易得多)。

这是一个 jQuery 的例子:

$(window).resize(function() {
  if ( $(window).height() < 800) {
    $('#Sidebar').addClass('beAbsolute').removeClass('beFixed');
  } else {
    $('#Sidebar').addClass('beFixed').removeClass('beAbsolute');
  }
});

CSS:

.beFixed {position:fixed;}
.beAbsolute {position:absolute;top:0px;}

默认情况下，使用绝对版本，以便没有 JavaScript 的用户可以看到整个侧边栏。