CSS：边栏固定位置被截断 [英] CSS: sidebar with fixed position getting cut off

问题描述

我的网站有一个侧边栏，其中有很多东西 - 这么多，浏览器视口必须有至少1020像素的高度，以便看到它，而不必滚动（除非，当然，你缩小） 。

我希望侧边栏的位置被固定，以便当您在具有大量内容的页面上时，边栏保持在您滚动时的相同位置。这很容易实现：

  div＃Sidebar {
 position：fixed; 
} 
  

这在我的电脑上工作得很好，只要浏览器是最大化的，运行在1920 x 1200.但如果我调整浏览器窗口的大小，侧边栏被切断。当我滚动页面的内容，我可以看到所有的页面的内容，但边栏仍然被切断，由于其位置是固定的。所以它似乎只有两个选项：

1. 使侧边栏的位置不固定（坏），但允许用户能够




2. 将边栏的位置固定（好），但不允许用户看到所有边栏

b

解决方案

你可以在javascript中做一个测试。
在纯javascript或者使用jQuery（将会更容易）。





这里是一个jQuery的例子：

  $（window）.resize（function（）{
 if（$（window）.height（）< 800）{
 $ （'#Sidebar'）。addClass（'beAbsolute'）。removeClass（'beFixed'）; 
} else {
 $（'＃Sidebar'）。addClass beAbsolute'）; 
} 
}）; 
  

CSS：

 code> .beFixed {position：fixed;} 
 .beAbsolute {position：absolute; top：0px;} 
  

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




My website has a sidebar with lots of stuff in it—so much that the browser viewport must have a height of at least 1020 pixels in order to see it all without having to scroll (unless, of course, you zoom out).

I'd like the sidebar's position to be fixed so that when you're on a page with lots of content, the sidebar stays in the same position as you scroll. This was very easy to implement:

div#Sidebar {
    position: fixed;
}

This works well on my computer as long as the browser is maximized because my monitor is running at 1920 x 1200. But if I resize my browser window, the sidebar gets cut off. As I scroll through the page's content, I can see all of the page's content, but the sidebar remains cut off due to its position being fixed. So it seems I only have two options:

1. Make the sidebar's position not fixed (bad), but allow users to be able to see all of the sidebar (good).

2. Make the sidebar's position fixed (good), but don't allow users to be able to see all of the sidebar (bad).

Is there a way to combine these two options?

解决方案

You could do a test in javascript. Either in pure javascript, or with jQuery (would be a lot easier).

Here's an example for 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;}

By default, use the absolute version, so that user without JavaScript can see the whole sidebar.

这篇关于CSS：边栏固定位置被截断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！