使用填充固定定位

Question

我正在使用jQuery，当用户滚动到目标div时，将广告单元固定在页面上。但是我需要将固定元素向左移动20px。我有一个包装它的div，padding-right: 20px;，但似乎被jquery添加fixed position class覆盖了。我只想将它固定在位置上，不要fixed left或right。

奇怪的是，在Firefox中，带有padding的包装div正常工作，即使使用fixed positioning。 然而，在Chrome中，padding被忽略，并且单位向左移动了20px。如何将此元素固定在页面顶部并在x轴上“锁定”它？是否可以使用两种不同的定位样式？（Fixed and absolute?）

以下是我使用的jQuery：

;(function($){
$(window).scroll(function() {
var styledDiv = $('#styledDiv'),
    targetScroll = $('#float').position().top,
    currentScroll = $('html').scrollTop() || $('body').scrollTop();

styledDiv.toggleClass('fixedPos', currentScroll >= targetScroll);
});

})(jQuery);

我尝试用一个名为“adside”的div包装已经添加样式的div，并使用以下css：

#adside {padding-right:20px;}

这里是HTML代码：

。

<div id="float"></div>
<script src="http://takemydough.com/wp-content/themes/iloveit/js/smartbanner.js"      type="text/javascript"></script>
<div id="adside">
<div id="styledDiv">
AD CODE
</div>
</div>
</div>

- user1270485

---

我已经添加了我正在使用的代码。 - user1270485

Answer 1

你的HTML中有一个额外的标签。尝试删除它并查看是否有所改变。与此同时，我会在jsfiddle上进行测试。

- Cynthia