javascript CSS 位置固定。Div 包装器必须垂直固定，但必须在水平方向变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10887834/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS position fixed. Div wrapper must be fixed vertically but must be varying in horizontally
提问by niko
I have a div , something like this
我有一个 div ，像这样
#footer
{ position:fixed;
left:40px;
top:0px;
}
The position is fixed when I scroll vertically or horizontally. But i want the div to be fixed when user scrolls the scroll bar vertically but should be varying when user scrolls the scroll-bar horizontally.
当我垂直或水平滚动时，位置是固定的。但是我希望当用户垂直滚动滚动条时 div 是固定的，但是当用户水平滚动滚动条时应该会有所不同。
I have seen some of the forums and posts but mostly I found jquery script.I want to know if there is a way to do it in CSS?
我看过一些论坛和帖子，但主要是我找到了 jquery 脚本。我想知道是否有办法在 CSS 中做到这一点？
Fixed position in only one directionI read this post but I did not understand the jquery script. Kindly let me know the way to do it in css or the better way to do it with jquery.Thanks
只在一个方向固定位置我读了这篇文章，但我不理解 jquery 脚本。请让我知道在 css 中执行此操作的方法或使用 jquery 执行此操作的更好方法。谢谢
采纳答案by doptrois
Seems to be impossible to get this "look fine" with only CSS/HTML. As mentioned from Ruupor Fixed position in only one direction, layering over JS for it, is a good option.
仅使用 CSS/HTML 似乎不可能获得这种“外观”。正如Ruup或Fixed position in only one direction 中提到的，在 JS上分层是一个不错的选择。
Fortunately, i found a way to get it work somehow (not that beautiful): http://jsfiddle.net/MKEbW/5/
幸运的是，我找到了一种让它以某种方式工作的方法（不是那么漂亮）：http: //jsfiddle.net/MKEbW/5/
HTML (inside the body-tag):
HTML（在 body 标签内）：
<div id="simulated-html">
<div id="footer">
<span>
<!-- Footer text here -->
</span>
</div>
<div id="simulated-body">
<!-- Your website here -->
</div>
</div>
CSS:
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;
}
? Seems to work in IE7+ and modern browsers, tested via browserlab.adobe.com.
? 似乎适用于 IE7+ 和现代浏览器，通过 browserlab.adobe.com 测试。
Tested with scrollbars, smaller and wider viewports in Chrome 18.
在 Chrome 18 中使用滚动条、更小和更宽的视口进行测试。
I recommend a fallback for not capable browsers and/or a JS workaround.
我建议对无能力的浏览器和/或 JS 解决方法进行回退。
回答by Vimal
There is a small fix on the previous code.
对之前的代码有一个小的修复。
The changed javascript code for moving fixed div horizontally
用于水平移动固定 div 的已更改 javascript 代码
$(window).scroll(function(){
$('#footer').css('left',-$(window).scrollLeft());
});
回答by Ruben-J
The linked post is exactly what you need. You can copy the exact script.
链接的帖子正是您所需要的。您可以复制确切的脚本。
$(window).scroll(function(){
$('#footer').css('left','-'+$(window).scrollLeft());
});
The div css is like this (probably not footer when it has top 0px :P but ok)
div css 是这样的（当它具有顶部 0px 时可能不是页脚：P 但可以）
#footer
{ position:fixed;
left:40px;
top:0px;
}
When you scroll the jquery script just adjusts the left(x) coordinate to the same value as the scrollLeft of the window.
当您滚动 jquery 脚本时，只需将 left(x) 坐标调整为与窗口的 scrollLeft 相同的值。
回答by kristina childs
how should the horizontal axis vary? the way this code is currently it would stay 40px from the left at all times. in order to make the left margin change position relative to the size of the window you must use percentages and negative margins. for instance, to center a fixed div:
横轴应该如何变化？此代码目前的方式将始终保持距左侧 40 像素。为了使左边距相对于窗口大小改变位置，您必须使用百分比和负边距。例如，要居中固定 div：
#centered {
height: 350px;
top: 0;
position: fixed;
width: 1024px;
left: 50%;
margin-left: -512px;
z-index: 9999;
}
notice that your negative margin must be HALF the width of your div. if you want it 40px to the left of center then you would add another 40px to margin-left.
请注意，您的负边距必须是 div 宽度的一半。如果您希望它位于中心左侧 40 像素，那么您将另外 40 像素添加到 margin-left。
