CSS 位置固定。 Div 包装器必须垂直固定，但必须水平变化答案

【问题标题】：CSS position fixed. Div wrapper must be fixed vertically but must be varying in horizontallyCSS 位置固定。 Div 包装器必须垂直固定，但必须水平变化
【发布时间】：2012-10-18 23:59:50
【问题描述】：

我有一个 div ，类似这样的

  #footer
   {   position:fixed;
       left:40px;
       top:0px; 
   }

当我垂直或水平滚动时，位置是固定的。但是我希望当用户垂直滚动滚动条时 div 是固定的，但当用户水平滚动滚动条时应该会有所不同。

我看过一些论坛和帖子，但主要是我找到了 jquery 脚本。我想知道是否有办法在 CSS 中做到这一点？

Fixed position in only one direction 我读了这篇文章，但我不明白 jquery 脚本。请让我知道在 css 中执行此操作的方法或使用 jquery 执行此操作的更好方法。谢谢

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

似乎不可能仅使用 CSS/HTML 来获得这种“看起来不错”。正如Ruup 或Fixed position in only one direction 中提到的，在JS 上分层是一个不错的选择。

幸运的是，我找到了一种让它以某种方式工作的方法（不是那么漂亮）： http://jsfiddle.net/MKEbW/5/

HTML（在正文标签内）：

<div id="simulated-html">
    <div id="footer">
        <span>
            <!-- Footer text here -->
        </span>
    </div>
    <div id="simulated-body">
        <!-- Your website here -->
    </div>
</div>

CSS：

* { margin:0; padding:0; }

html {
    font: 12px/1.5em Georgia;
}
p { padding: 5px; }

html, body {
    height: 100%;
    overflow: hidden; /* hide scrollbars, we create our own */
}

#simulated-html {
    background: orange;
    overflow-x: scroll; /* force horizontal scrollbars (optional) */
    overflow-y: hidden; /* hide. we use the #simulated-body for it. */
    position: relative; /* to align #footer on #simulated-html */
    height: 100%;
}

#simulated-body {
    overflow-y: scroll; /* force vertical scrollbars (optional) */
    overflow-x: hidden; /* hide. we use the #simulated-html for it. */
    height: 100%;
    background: #eee;

    /* use as a container */
    width: 450px;
    margin: 0 auto;
}

#footer {
    position: absolute;
    bottom: 0px; /* vertical align it to #simulated-html */
    width: 100%;
    background: red;
    z-index: 99; /* always show footer */
    color: white;
}
#footer span {
    width: 450px;
    margin: 0 auto;
    background: green;
    display: block;
}

似乎在 IE7+ 和现代浏览器中工作，通过 browserlab.adobe.com 测试。

在 Chrome 18 中使用滚动条、更小和更宽的视口进行测试。

我建议对不支持的浏览器和/或 JS 解决方法进行后备。

【讨论】：

JS 小提琴工作了吗？我不太清楚我在寻找什么，但我没有看到任何橙色背景，例如，也没有页脚文本。你介意解释一下这应该如何工作吗？

【解决方案2】：

链接的帖子正是您所需要的。您可以复制确切的脚本。

$(window).scroll(function(){
$('#footer').css('left','-'+$(window).scrollLeft());
});

div css 是这样的（当它有顶部 0px 时可能不是页脚：P 但没问题）

#footer
{  position:fixed;
   left:40px;
   top:0px; 
}

当您滚动 jquery 脚本时，只需将 left(x) 坐标调整为与窗口的 scrollLeft 相同的值。

【讨论】：

所有阅读本文的人请注意，它确实有效，但是您必须在您的.html 文件中链接 jQuery 才能使其正常工作。

【解决方案3】：

对之前的代码有一个小修正。

用于水平移动固定 div 的更改 javascript 代码

$(window).scroll(function(){
  $('#footer').css('left',-$(window).scrollLeft());
});

【讨论】：

所有阅读本文的人请注意，它确实有效，但是您必须在您的.html 文件中链接 jQuery 才能使其正常工作。

【解决方案4】：

水平轴应该如何变化？这段代码目前的方式将始终保持距离左侧 40 像素。为了使左边距改变相对于窗口大小的位置，您必须使用百分比和负边距。例如，将固定 div 居中：

     #centered { 
          height: 350px;
          top: 0;  
          position: fixed;
          width: 1024px; 
          left: 50%; 
          margin-left: -512px; 
          z-index: 9999;
          }

请注意，负边距必须是 div 宽度的一半。如果你希望它在中心左侧 40px，那么你可以在 margin-left 上再增加 40px。

【讨论】：