我不久前做过类似的事。我对JavaScript很陌生，所以我相信你可以做得更好，但这里有一个起点：

function fixxedtext() {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        if (document.body.offsetWidth > 960) {
            var width = document.body.offsetWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (document.body.offsetWidth < 960) {
            var width = 960 - document.body.offsetWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    else {
        if (window.innerWidth > 960) {
            var width = window.innerWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (window.innerWidth < 960) {
            var width = 960 - window.innerWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    window.setTimeout("fixxedtext()", 2500)
}

您需要设置宽度，然后它会获取窗口宽度并每隔几秒更改边距。我知道它很重，但它有效。

我不得不用我的客户想坐在内容区之外的广告来做这件事。我只是简单地做了下面的事情，它就像一个魅力！

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>

答案是肯定的，只要在将div位置设置为固定后不设置left:0或right:0。

http://jsfiddle.net/T2PL5/85/

签出侧边栏div.它是固定的，但与父级相关，而不是窗口视图点。

正文{背景：#ccc；}.包装器{边距：0自动；高度：1400px；宽度：650px；背景：绿色；}.侧边栏{背景色：#ddd；浮动：左侧；宽度：300px；高度：100px；位置：固定；}.主要{浮动：右侧；背景色：黄色；宽度：300px；高度：1400px；}<div class=“wrapper”>包装器<div class=“sidebar”>侧边栏</div><div class=“main”>main</div></div>

神奇的是将屏幕宽度减去容器宽度，然后除以2：

//1400px is according to container max-width (left can be also right)
.fixed {
  position: fixed;
  right: calc((100vw - 1400px)/2);
}

注意：css calc（）函数几乎不受支持，但不是100%受支持。对于大多数用例，它肯定得到了足够的支持。单击此处了解更多详细信息

代码段（有一个300px的容器，正好适合这个网站的小部件）：

.容器{最大宽度：300px；左边距：自动；右边距：自动；}.固定{位置：固定；右：计算（（100vw-300px）/2）；}@媒体屏幕和（最大宽度：300px）{右：0px；}<div style=“height:3000px”><div class=“container”><button class=“fixed”>固定含量</按钮>Lorem ipsum dolor坐在amet consectetur adipiscing elit。Laborum，eum？我要求最低限度，最低限度，最高限度，最低程度，最低限度-最低限度-最高限度！是否有责任追究责任？在过去的几年里，人们都在用鼻子和鼻子说话，用鼻子说话！在法庭的最高级别减去实验室的修改和体积后，法庭上的数字是相等的。加快我们的劳动时间，让我们一起努力，共同努力，共同奋斗，共同进步，共同进步！无论是什么样的物质解决方案，几乎没有人会在别名为auten pariator animi error的地方进行实验，也没有人会对实验结果进行验证！在dolorem ipsam eos porro magni出汗可能是主要的，它的脸。我们的过失是错误的，因为它排斥了可能的质量，asperiores earum ipsum interstias dicta sint fugit at que veniam dolorum illo？官方必须对所有人进行调查，调查结果表明，最大限度地减少自然灾害。所有人都坐着。</div></div>

当您使用position:fixed CSS规则并尝试应用top/left/right/bottom时，它会相对于窗口定位元素。

解决方法是使用边距财产，而不是上/左/右/下

两个HTML元素和纯CSS（现代浏览器）

请参见这个jsFiddle示例。调整大小并查看固定元素如何随浮动元素一起移动。使用最内侧的滚动条查看滚动在站点上的工作方式（固定元素保持固定）。

正如这里许多人所说的，一个键没有在固定元素上设置任何位置设置（没有上、右、下或左值）。

相反，我们将所有固定元素（注意最后一个框中有四个元素）放在要放置的框中，如下所示：

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

然后我们使用margin-top和margin-left相对于容器“移动”它们，就像这个CSS所做的那样：

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

注意，因为固定元素忽略了所有其他布局元素，所以fiddle中的最终容器可以有多个固定元素，并且仍然具有与左上角相关的所有元素。但是，只有当它们都放在容器中的第一个位置时，这才是正确的，因为这一比较结果表明，如果分散在容器内容中，定位就会变得不可靠。

包装器在定位上是静态的、相对的还是绝对的，这无关紧要。