CSS/JQuery：一个滚动的、覆盖的div和一个居中的布局-如何使它处于一个固定的位置？

在谷歌上搜索了几次之后，我想不出其他关键词了，我还是被卡住了

以下是我得到的和想要得到的：
一个网站，cms使用中心布局（由导航组成，下面分为主要内容部分和边缘栏，以页脚结尾）和一个我想用作覆盖的div。准确地说，它应该在右边的列上结束，如果用户向下滚动，它不应该消失，而是停留在边缘列的顶部。稍后，将添加一些关闭按钮使其隐藏，以便可以使用实际列，但这是另一个故事

我可以用什么来解决这个问题：
JQuery、JavaScript、CSS、HTML——但对于前两个，我还没有经验

到目前为止我做了什么：
-试验位置：固定；绝对的；使用top/left/right/bottom等工具进行了尝试，使其保持不变（这当然适用于absolute，但如果用户滚动，它不会保持在顶部）
-搜索一些方法来完成JQuery（找到了Lightbox的想法，也想到了这一点，但它也会随着窗口大小改变位置，因此不可用）
-搜索CSS解决方案（只找到固定的东西以及如何在IE中完成它，但这没有帮助，因为我需要将它与布局而不是窗口联系起来）

当我特别搜索Stackoverflow时，我发现了一些类似的问题，但仅仅是CSS无法实现，而当时人们会用JS实现——但当时我找不到如何实现。所以是 啊请帮忙

我会为你提供这个网站，但因为它还没有正式发布，我想我的老板不会同意的。对不起

为什么，是的，我们来举个例子

<div class="Content">
  <div class="InnerContent">
    Insert text of page here
  </div>

  <div class="MarginalColumn">

    Newsletter<br/>
    Contact <br/>
    Whatever <br/>

    <div class="MargOverlay">
       Here goes some random Text, random length, maybe some picture - that's variable
    </div>
  </div>
</div>

.Content{
    padding: 0 9px 80px 11px;
    position: absolute;
    top: 77px;
    width: 975px;
}

.Content .Innercontent{
    border-right: 1px solid #D9DADB;
    float: left;
    padding: 0 20px 20px;
    width: 714px;
}

.MarginalColumn{
    background-color: #FFFFFF;
    float: right;
    padding: 10px 0 0;
    width: 219px;
}

.MargOverlay {
    background: none repeat scroll 0 0 rgba(0, 106, 178, 0.8);
    color: white;
    height: auto;
    left: 780px;
    max-height: 670px;
    padding: 5px;
    position: fixed;
    top: 0;
    vertical-align: middle;
    width: 220px;
    z-index: 80;
}

在此处插入页面文本
时事通讯

联系方式

不管怎样

这里有一些随机的文字，随机的长度，可能是一些图片-这是可变的
.内容{
填充：0 9px 80px 11px；
位置：绝对位置；
顶部：77px；
宽度：975px；
}
.Content.Innercontent{
右边框：1px实心#D9DADB；
浮动：左；
填充：0 20px 20px；
宽度：714px；
}
.边缘栏{
背景色：#FFFFFF；
浮动：对；
填充：10px0；
宽度：219px；
}
玛格丽特先生{
背景：无重复滚动0 rgba（0、106、178、0.8）；
颜色：白色；
高度：自动；
左：780px；
最大高度：670px；
填充物：5px；
位置：固定；
排名：0；
垂直对齐：中间对齐；
宽度：220px；
z指数：80；
}

CSS和jQuery/JavaScript的组合可以解决这一问题：

jQuery：

$('#my_overlay').css('position', 'fixed')
.css('top', ($(window).height() - $("#my_overlay").height()) / 2)
.css('left', ($(window).width() - $("#my_overlay").width()) /2)

您也可以轻松地将这些内容转换为基本JavaScript，但由于IE以奇怪的方式提供了窗口高度和宽度（在IE 9之前，您不能使用

innerHeight

和

innerWidth

），这让人有点头疼

---

另外

position:fixed

在IE 4-7中存在一些问题。但真的吗，IE7？如果你想支持IE7，我很同情你。

哦，对了，我忘记了：当然，我一开始就用z-index来覆盖它。你需要发布一些代码。没人能通过你的描述猜到发生了什么。试着用一个小玩具的例子来重现这个问题。不，真的，JQuery非常完美。明天早上我会试试，并给出一些反馈。窗口。。为什么我没想到窗户！？已经谢谢了。如果对你有用，别忘了投票并接受。。。（因为这正是我们在bookmarklet应用程序上处理这个用例的方式）好吧。。成功了！伟大的谢谢你。只有一件事：如果窗口的大小调整得太大以至于页面的某些部分也消失了，我能做些什么来防止覆盖层移动吗？它们不会调整到新的大小，只会保持在该大小（它始终与像素一起）-现在，边缘列将在右侧消失，覆盖仍然存在（只要显示较低的滚动条，即），好的，我自己解决了这个问题——我使用了第二个DIV作为覆盖容器，并用tkone的代码对其进行了调整，这对我来说是可行的。再加上覆盖层在更大的容器中的一点定位，效果非常好：再次感谢。顺便说一句，我很想投上一票，但上面说我只能投15票。听起来不错！您还可以将javascript侦听器附加到“resize”事件，并使用

top

和

left

css命令重新定位覆盖。