定位一个“固定"的 Div垂直和“绝对"水平在“位置:相对"内容器部门 [英] Position a Div "Fixed" Vertically and "Absolute" Horizontally within a "Position:Relative" Container Div

问题描述

我正在寻找一种方法，我可以创建一个垂直固定在页面上的 div，因此如果用户向下滚动，该 div 将保持在页面上的同一位置.但是让它绝对水平放置，所以如果用户屏幕比我的网页窄，向右或向左滚动不会导致 div 随屏幕移动，并且在某些情况下，在屏幕边缘保持一半可见或完全离开页面.

此 div 必须在Position:Relative"Div 内.

我相当确定没有办法为 div 的不同轴分配不同的位置，但这是描述我希望达到的效果的最佳方式.

到目前为止我有这个，它基本上只是一个相对 Div 中的固定 Div.

CSS

#container {位置:相对；宽度:700px；高度:1000px；顶部:50px；左:50px；背景颜色:黄色；}#蓝盒{位置:固定；宽度:100px；高度:100px；背景颜色:蓝色；边距顶部:20px;左边距:400px；{

HTML

<div id="blue-box"></div>

我还创建了一个 jsFiddle 来帮助演示这个问题.

这适用于垂直方向，但如果您调整 Web 浏览器的大小使其比黄色框(容器)窄，然后水平滚动，则蓝色框将随页面移动.我希望阻止这种情况发生.

如果没有办法通过 CSS 实现这一点，我非常乐意使用 JavaScript，只要它适用于所有现代浏览器以及 IE7 和 IE8.(这就是我添加 JavaScript 标签的原因)

有人可以帮我吗?

解决方案

使用 JQuery，使用文档的 scrollLeft() 属性！这行得通

$(window).scroll(function(event) {$("#blue-box").css("margin-left", 400-$(document).scrollLeft());});

另见

http://jsfiddle.net/zhQkq/9/

祝你好运！

如果您希望它使用预设的左边距而不是硬编码的400"，请使用

$(window).scroll(function(event) {$("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft());});

I'm looking for a way I can create a div which will be fixed on the page vertically, so if the user scrolls down, the div stays at the same place on the page. But have it positioned absolutely horizontally, so if the users screen is narrower than my webpage, scrolling to the right or left will not cause the div to move with the screen and, in some cases, remain either half visible at the edge of the screen or off the page completely.

This div must be within a "Position:Relative" Div.

I'm fairly sure there is no way to assign different positions to the varying axis of a div but this is the best way to describe the effect which I am hoping to achieve.

I have this so far, which is basically just a Fixed Div within a Relative Div.

CSS

#container {
position:relative;
width:700px;
height:1000px;
top:50px;
left:50px;
background-color:yellow;
}

#blue-box{
position:fixed;
width:100px;
height:100px;
background-color:blue;
margin-top:20px;
margin-left:400px;
{

HTML

<div id="container">
<div id="blue-box"></div>
</div>

I have also created a jsFiddle to help demonstrate the problem.

This works fine for the vertical, but if you resize your web-browser so that it is narrower than the yellow box (container) and then scroll horizontally, the blue box will move with the page. I'm hoping to stop that from happening.

If there is no way to achieve this through CSS, I'm perfectly happy to use JavaScript as long as it works with all modern browsers and both IE7 and IE8. (Which is why I have added the JavaScript tag)

Can anyone help me out?

解决方案

With JQuery, use the scrollLeft() property of the document! This would work

$(window).scroll(function(event) {
   $("#blue-box").css("margin-left", 400-$(document).scrollLeft());
});

See also

http://jsfiddle.net/zhQkq/9/

Good luck!

Edit: If you want it to use your preset margin-left instead of a hard-coded "400", use

$(window).scroll(function(event) {
   $("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft());
});

这篇关于定位一个“固定"的 Div垂直和“绝对"水平在“位置:相对"内容器部门的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！