パディング付きの固定位置

Question

ユーザーがターゲットdivにスクロールダウンすると、jQueryを使用して広告ユニットを修正しています。しかし、私は固定要素を20px以上左に動かす必要があるセットアップがあります。私はパディング右 - 20pxでそれをラップするdivがあります。これは、jqueryが固定位置クラスを追加するとすぐにオーバーライドされるようです。私は固定位置がトップ10pxの場合にのみそれを持っています。私はそれが固定されたままにしたいので、左または右に固定したくありません。

奇妙なことは、固定位置であっても、パディングがラップされていることです。ただし、Chromeでは、パディングは無視され、単位は20ピクセルを超えてシフトされます。どのようにしてこの要素をページの上部に固定し、x軸上の所定の位置に「ロック」することができますか？ 2つの異なる測位スタイルを使用できますか？ （固定および絶対？）

編集：

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

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

})(jQuery); 

を、私は私が "adside" という名前のdivでstyledDivをラップしようとしました：

ここでjQueryのは、私が使用していますですこの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> 

Answer 1

HTMLに余分なタグがあります。それを削除して、それが何かをするかどうかを確認してください。その間に私はそれをjsfiddleでプレイします。