Javascript 如何使元素位置固定，但也离开窗口？

假设我在浏览器窗口中有一个右菜单：

___________________________
                   | Right |
        content    | Menu  |
                   |       |
                   |       |
                   |       |
                   |       |
                   |       |
                   |       |
                   |       |
___________________|_______|

我希望菜单是固定的，以便用户看到相同的东西，因为他/她向下滚动。所以我设置了位置：右菜单的固定位置

但是，如果窗口太小，我也不希望看到菜单。i、 e.窗口应在右菜单前显示全部内容

像这样：

_________________________
                   | Ri |
        content    | Me |
                   |    |
                   |    |
                   |    |
                   |    |
                   |    |
                   |    |
                   |    |
___________________|____|

在纯css中有没有办法做到这一点？如果不是，一个非常简单的js修复程序

编辑：

我有一个相关的问题，所以我觉得没有必要再提出另一个问题：

---

我有一个固定的宽度为右菜单，但我需要左边的内容自动调整其宽度相应（填补左侧）。有没有办法在css中做到这一点并保留上述功能？

如果您知道内容的维度，您可以使用以下方法：

position:fixed; left:800px;

而不是：

position:fixed; right:0;

如果说你的内容是800像素宽。这意味着您的计算是从左侧开始的，如果用户窗口小于此值，菜单将弹出屏幕

更新 看来您的要求如下：

• 您有一个指定了最小宽度的内容区域
• 您需要使用菜单与用户一起滚动
• 您需要将菜单显示在右侧，直到菜单侵占内容的最小宽度

我建议您使用JavaScript来解决这个问题，您可以通过纯CSS来实现，但是可以将菜单放在覆盖整个页面的固定层中。虽然这里的逻辑在现代浏览器中起作用——由于对菜单容器上方的内容进行z索引，我不想看到老用户代理会如何利用它：

纯css版本 css

/* make sure our content doesn't collapse too small */
.content { 
  position: relative;
  z-index: 20;
  min-width: 700px;
  margin-right: 200px;
}
/* place our menu container across the entire page */
.menu-container {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
/* a layer that mimics what our content does */
.menu-offset  {
  position: relative;
  min-width: 700px;
  margin-right: 200px;
  height: 100%;
}
/* finally the menu attached to the right of the menu offset */
.menu-content { 
  position: absolute;
  width: 200px;
  height: 100%; 
  left: 100%;
  background: #ddd;
}

标记

<div class="content">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis 
  adipiscing magna sed ipsum convallis vel fringilla nibh viverra.
  Nulla et ligula vel urna scelerisque imperdiet a et lectus.
  Nunc commodo, nibh id blandit mollis, leo quam eleifend urna,
  at rhoncus turpis justo sit amet erat. Quisque tempus nunc 
  vitae eros fringilla eget imperdiet neque tincidunt. Donec 
  ac posuere diam. Nam nibh nibh, sollicitudin non blandit ut, 
  auctor in dolor. Nullam lobortis condimentum consequat. 
  </p>
  <p>
  Maecenas at orci massa, quis congue mauris. Vivamus varius 
  tincidunt nunc, eget <a href="#canyouclickthis">pellentesque arcu 
  faucibus</a> ac. Suspendisse rhoncus orci eu felis consectetur 
  rutrum. Nullam sed mauris eros. Nunc dignissim, libero dapibus 
  consectetur lobortis, ante urna faucibus dui, vel luctus metus 
  leo id magna. Pellentesque mi ligula, commodo ac pellentesque 
  et, auctor sed neque. Phasellus dapibus tellus faucibus dui 
  vehicula hendrerit. Pellentesque habitant morbi tristique 
  senectus et netus et malesuada 
  fames ac turpis egestas.
  </p>
</div>
<div class="menu-container">
  <div class="menu-offset">
    <nav class="menu-content">Menu</nav>
  </div>
</div>

---

同样，最好在Internet Explorer之类的设备上测试这一点，因为我无法访问特定的用户代理atm。

对于问题的第二部分，请将

内容

元素设置为

右边距

或

右边距

所以

---

演示在

使用jQuery，您可以计算窗口的宽度和内容的宽度，然后将其分配给菜单的左侧值

var leftPosition = ($('#wrapper').width() / 2 ) + ($(window).width() / 2);

$('#menu').css("left", leftPosition);

使用$（window.resize（）；在窗口更改时重新计算。添加一个if/else语句，以确保它保持在一定数量以上，并且已设置

---

这里有一个

是的，没错，但不幸的是，我不知道这条路的宽度window@Derek您不需要知道窗口的宽度，只需要知道您希望内容包装的宽度。为了让菜单在窗口太小时向右推，您需要为内容设置某种宽度。。但是，如果您的内容可能具有最小宽度和最大宽度，那么这将变得更加棘手。如果是后者，你最好使用js修改

左

偏移量，使其与响应内容的当前宽度一致。啊，是的，你是对的，但我也不知道内容的宽度。对不起，我应该多说一点clear@Derek我已经添加了一个纯css解决方案的更新，但是它应该在所有目标用户代理中进行测试，以确保没有不良影响。调整浏览器大小时内容是否水平调整大小？不，内容未设置为高度：100%我指的是它的宽度（不是它的高度），如何确定内容的宽度？我刚刚添加了我的问题，但目前宽度设置为80%，根据pebbl的回答，我可以设置为左：80%。但是，我的右菜单被设置为240px，因此如果我这样做，则会有一个空白的右间隙，因此，我需要留下内容来填充。OP没有说明他使用jQueryGaby的右菜单。谢谢你指出这一点。我编辑过它，说他需要把它包括进去

.menu{
   position:fixed;
   top:0;
   bottom:0;
   right:0;
   width: 240px; /*the fixed width you want*/
}

.content{ /*assuming there is a wrapper element*/
   margin-right:240px; /*same as fixed width of menu*/
}

var leftPosition = ($('#wrapper').width() / 2 ) + ($(window).width() / 2);

$('#menu').css("left", leftPosition);