定位Div“固定”垂直和“绝对”水平地在“位置：相对”集装箱 [英] Position a Div "Fixed" Vertically and "Absolute" Horizontally within a "Position:Relative" Container Div

问题描述

我正在寻找一种方式，我可以创建一个div，将垂直固定在页面上，所以如果用户向下滚动，div保持在页面上的同一个地方。但是它的位置是绝对水平的，所以如果用户屏幕比我的网页更窄，向右或向左滚动不会导致div随屏幕移动，在某些情况下，保持在屏幕边缘一半可见

这个div必须在Position：RelativeDiv之内。

相当肯定没有办法为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> 
  

我也创建了一个 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/

祝你好运！ / p>

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

  $（window）.scroll（function（event）{
 $（＃blue-box）。css（margin-left，$（蓝框）。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屋！