使用填充固定定位

时间:2012-03-16 12:57:45

标签: css position positioning padding fixed

一旦用户向下滚动到目标div,我就会使用jQuery修复广告单元。但是我有一个设置,我需要将固定元素向左移动超过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);

我尝试用一​​个名为“adside”的div用这个css包装styledDiv:

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

1 个答案:

答案 0 :(得分:0)

HTML中有额外的标记。尝试删除它,看看它是否做任何事情。在此期间我会用jsfiddle玩它。