css - 带填充的固定定位

Question

我正在使用 jQuery 在用户向下滚动到目标 div 时修复广告单元。但是我有一个设置，我需要将固定元素向左移动 20px 以上。我有一个 div，用 padding-right: 20px; 包裹它但这似乎在 jquery 添加固定位置类后立即被覆盖。我只在固定位置是前 10px 的地方有它。我不希望它向左或向右固定，因为我希望它锁定到位。

奇怪的是，即使定位固定，带填充的 wrap div 在 firefox 中也能正常工作。然而，在 Chrome 中，填充被忽略并且单位移动超过 20px。如何将此元素固定到页面顶部并将其“锁定”在 x 轴上？是否可以使用两种不同的定位方式？ (固定和绝对？)

编辑:

这是我正在使用的 jQuery:

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

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

})(jQuery);

我已经尝试用一个 div 包装 styledDiv 我用这个 css 命名为“adside”:

#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>

Answer 1

您的 HTML 中有一个额外的标签。尝试删除它，看看它是否有任何作用。在此期间，我将在 jsfiddle 中使用它。